Up next in 10
Angular 13 js2xmlparser Project to Parse JSON Data to XML in Browser Using TypeScript
Dec 22, 2025
Buy the full source code of application here:
https://buy.stripe.com/00g8zQgfL8gMbvOd9m
Show More Show Less View Video Transcript
0:06
Uh hello friends, today in this tutorial
0:10
I will be telling you that uh how to
0:12
parse JSON objects into [snorts] XML
0:17
inside your Angular 13 application. So
0:20
many situations occur in those scenario
0:24
you want to convert your JSON object or
0:27
JSON data into XML. So there is various
0:31
converters which are available on the
0:33
internet which allows you to do this. So
0:36
there is uh JSON data as you know that
0:38
uh whenever you call some external API
0:42
you request data in the form of JSON.
0:45
JSON stands for JavaScript
0:50
objects.
0:52
So basically JSON full form is [snorts]
0:57
uh JavaScript object notation. So
0:59
whenever you call an external API
1:02
for any sort of task you get that data
1:05
in the form of JSON. So many of times
1:08
you need to convert that data into XML
1:10
which is XML is also very popular format
1:12
which is known as extensible markup
1:15
language. So many a times you need to
1:17
convert your JSON into XML. So we will
1:20
be looking at in this tutorial how to do
1:22
this inside your angular 13 application.
1:25
So there is a special dependency guys
1:27
which is available inside NodeJS which
1:30
is called as JS to XML passer. This is
1:34
the dependency guys we will be using in
1:37
this tutorial in order to parse the JSON
1:40
into XML. And you can take any JSON
1:45
object for this and convert this into a
1:49
XML.
1:55
So npmjs you can go to and search for
1:59
this package JS2XML passer. So basically
2:03
the very first result which comes in
2:05
guys you need to click on this result
2:08
and uh it's a very popular package
2:13
uh why I don't know why it is coming
2:15
like this uh
2:19
you can see that weekly downloads over 1
2:21
million weekly downloads are there so
2:24
it's a very popular package and we will
2:26
be looking at a very simple example on
2:29
how to use it inside your angular
2:31
application.
2:32
You can also use it inside your NodeJS
2:34
application. You just need to require it
2:36
like this but we will be looking at an
2:39
angular application.
2:41
So first of all you need to make your
2:43
angular project guys. So I have already
2:45
made the angular project. So first of
2:47
all guys please hit the like button
2:49
subscribe the channel as well. If you
2:52
want the full source code, you can go to
2:53
the video description link and I have
2:56
written a complete blog post explaining
3:00
in detail on how to go about the things.
3:03
So
3:04
go to the blog post and copy paste all
3:06
the source code. So now inside your
3:09
angular project guys, you need to first
3:11
of all install this package. So npmi js2
3:15
xml passer. So you need to install this
3:18
package. So it will hardly take 5 to 10
3:21
seconds. So now you need to start your
3:23
angular application by simply typing
3:26
ngserve. So inside your app.component.ts
3:30
file guys, we will now first of all we
3:32
will export we will import this library.
3:35
So import
3:37
as JSON to XML
3:43
and we will import this. Sorry this
3:45
needs to be
3:47
like this.
3:49
So this will be coming from guys JS2XML
3:52
passer. So we have successfully imported
3:56
the library. Now we need to declare an
3:59
object. So basically it's a JSON object
4:03
and uh you can have some properties.
4:06
Uh
4:11
and uh then you can simply say the
4:14
country
4:21
age
4:26
and uh
4:29
and uh location
4:32
and this will be all. So there are four
4:35
properties guys you can see first name,
4:37
country, age, location. So this is our
4:39
JSON object. Now we need to convert this
4:42
JSON or parse this JSON object into XML.
4:47
How we can do this inside this library?
4:49
It's very simple. This contains a very
4:52
simple method by which you can do this.
4:55
And after you do this inside your
4:58
constructor, you can do this. Simply
5:02
you can console lock you can initialize
5:05
JSON to XML and there is a method out
5:09
there which is parse. So dot parse.
5:13
So inside you will pass your uh object
5:18
which will be obj.
5:22
You will see that
5:24
no this needs to be just an name of the
5:27
XML file. So I will just say that person
5:31
and then we need to pass this dot
5:34
object. That's it. Whatever JSON object
5:36
that you want to process or compile. So
5:40
now guys you can uh
5:42
just do it. Compile successfully. Now
5:44
you can open your uh
5:47
angular application
5:51
at localhost
5:53
4200 I think.
5:57
And uh right here if you go to inspect
5:59
element in the console you will now see
6:02
guys it has successfully converted this
6:04
JSON object and it has containing four
6:07
properties. You can see first name tag,
6:09
country tag, age tag, location tag. So
6:13
basically if you are familiar with the
6:15
XML extensible markup language you will
6:17
find out this is correct syntax and uh
6:21
this is all that we need to do guys. So
6:23
this is if I I can add endless number of
6:26
properties. I to this
6:29
like this. [snorts]
6:32
If I add a fifth property, you will now
6:34
see this will have the fifth tag here.
6:37
You can see that.
6:40
So this is the basic structure of an XML
6:43
document guys. It is that easy to
6:44
convert your JSON object into XML inside
6:48
using this library which is JS2 XML
6:51
parser. You just need to use the parse
6:54
method.
6:55
just pass the name of the
6:58
uh object which is in this case is
7:02
person
7:03
and uh then you need to pass the JSON
7:06
object. So this JSON can be complicated
7:09
as well guys. So let me take a very
7:12
complicated example
7:14
and many a times when you call the data
7:16
from the API the JSON is not simple it's
7:19
very much complicated something like
7:21
this you can see that it contains arrays
7:24
as well it contains array of objects it
7:27
contains various properties you can see
7:28
that it this is an array here you can
7:31
see array of objects
7:33
so now basically if I refresh it
7:38
so if I Now,
7:42
so now you can see that guys it has
7:45
successfully converted this first name,
7:48
last name, date of birth. You will see
7:50
that address,
7:52
phone number. So this is an array of
7:55
object. So phone, phone, phone, this is
7:59
the email tag. So in this way you can
8:02
construct your XML
8:04
using the JSON object. So here you can
8:07
provide as complicated JSON as you can
8:11
and then you can simply use the parse
8:13
method. So this is all that I need to
8:15
show in this guys. So hopefully you will
8:17
like this video. Please hit the like
8:19
button, subscribe the channel as well.
8:21
Please hit the like button and I will be
8:23
seeing you in the next stream.