fetch

Fetching and Reading XML Data



Sharing buttons:

so I have a video talking about XML what

it is how you can write it but I don't

have a video yet on how you can actually

read data from an XML file lots and lots

and lots of api's out there provide data

currently as JSON however there are also

a lot of older api's that still provide

data in XML format so you can have an

XML file that contains all the data you

need or you could have a JSON file that

contains all the data that you need

sometimes API s will provide data in

multiple formats but as a developer you

really should be able to handle data in

any format that it's given to you

whether it's a CSV or JSON or XML or

just plain text tab delimited files

whatever you want so what I'm gonna do

here is I have an XML file that I've

created right here this XML file

contains a 1 root element there's a

houses element in a swords element

inside of root and then houses contains

a whole bunch of house elements that

have ID attributes and these are not

HTML ID attributes remember that this

this is XML so there's no implied

meaning it's just a string that equals

some value bunch of values inside of

each one of these then the sword's

contains a bunch of sword elements they

have owner attributes and then text as

well so I'm going to use fetch to bring

this data into my XML file and that's

where I'm that's my starting point is

I've already got the code that loads

this XML file using fetch and then I'm

writing out the string value inside of a

pre tag so a pre formatted HTML element

is displaying all this content

now it's worth noting that the old way

of doing ajax the xmlhttprequest object

when you did this when you sent the

request off you got the response back

there was a response XML property and

that's because at the time that this was

created XML was the de facto standard

that everybody was using Jason didn't

exist yet

once JSON came around a lot of people

switched over to using JSON because it

was was a lot closer while it was

JavaScript object notation so they were

used to using JavaScript they started

using JSON and then JSON was created the

modules for every different programming

language out there to support JSON were

created and then that fueled the growth

of JSON as well but that doesn't mean

that you shouldn't know XML as well

because there are still api's that only

provide data as XML so here's my URL

it's in the same folder is this file on

the same web server doesn't matter where

this files coming from I'm doing a fetch

I'm getting it back and then instead of

response dot JSON I can't call the JSON

method on an XML file they just won't

work so I have to call the text method

with the response object inside of the

fetch API I have the response object the

request object the body object the

response object of the body object have

a series of methods there's text JSON

and blob those are the three primary

ones text will give you the text version

of whatever you go you brought back so

this response object I'm extracting the

text from there and then that's passed

on to the next ven method this variable

right here data that is going to be the

string I'm logging it out in the console

but I'm also right here putting this

onto the page my output element and if

we look up here this is the pre tag with

the ID output this is where I'm placing

all that XML so I'm just taking that

variable data that was sent in to this

function and

putting it as the text content so this

is the contents of that file now that's

the content that is the string that is

inside that file but if I want to work

with it as if it is actually XML data I

have to convert it from a string into an

XML object and that's where this thing

comes in the new Dom parser object so we

instantiate a Dom parser object we call

the new the constructor method parser is

now one of these Dom parser objects and

it has a method parsed from string we

pass in data which is the string and

then we set up what kind of file it is

this could be text slash XML text slash

HTML if this were an HTML string we can

do this we can build a new Dom object

from a string of HTML so we have now

this variable XML which is the XML

representation of all of this if I were

to console.log XML just refresh this

come back in here go to inspect and

we'll look at the console there it is so

it is we're getting a parse error

okay yeah I can see I should have

included the encoding now this isn't the

air but it's always a good idea to

include the encoding attribute and I

need a question mark here at the end of

my doctype declaration all right so

let's reload this see what we get there

we are

so the document inside that there's the

houses there's the swords so this is the

XML document that's a good thing I

checked all right coming back to the

JavaScript now it being part of me what

I'm gonna do is I'm going to take all of

these values these strings right here

for the houses and I'm gonna create list

items out of those I'm going to put

those inside of here as list items so

let's do that so

build house list and I'm gonna pass my

XML object over that and this is the end

of my function there so I'm going to

create this function build house list

and I'm passing in my XML object okay so

this XML object the actual document is

being passed into this variable here X

and I need to populate this so create a

variable called houses which will be

actually let's just call it a list

get the element called houses okay

that's what we're going to append

everything to now in my XML I want to

find all these house elements well it's

not the same as JSON where I just use

dot notation to move down I actually

have to use the same methods I would for

HTML so houses is going to be that's why

I change this to list document get

elements by tag name I want to get all

the ones with the name house that will

be this list right here so I've now

jumped from the root element down

through the houses into here and if

you're not familiar with XML this does

not have to be called root I just called

it root code it because it is the root

tag it can be anything at all as long as

it matches the closing tag so all of

this right now this is what is inside of

this variable houses so I'm going to

loop through houses so let's do a simple

for loop is less than houses dot length

I plus plus okay

and for each one of these houses I want

to create a list item inside of here so

like a like old occupant create element

a lie that's the list item and the name

here Lannister started Greyjoy and so on

those will be the strings that are the

text content for these list items but I

need to get to that value so houses some

I that is the house that I'm looking at

so it'll be the first house first time

through this loop this is what we're

looking at now this first house and we

need to go inside that so first child

very quick and easy way to jump inside

right here if I was looking at this HTML

main or this HTML the first child

element is the h1 now there is a text

node right here though so header first

child could give me this text note I

want to jump down to make sure I get

this the first child element now there

is no character turn or anything like

that

but I want to be certain that I'm

getting the actual tote sorry it's not a

tag that I'm trying to get here if I was

trying to get the tag from a header to H

1 this is the first child element since

I want that first piece of text inside

of here

first child works well so first child is

going to be this but remember in XML in

HTML there's the three main types of

nodes that we deal with element nodes

text nodes and attribute nodes this is a

text node I can't just say I want this

text node and then treat it like a

string I need to get the string from

inside of the text node which it sounds

a little bit awkward it sounds like an

extra step but that's what we need to do

so node value that is the actual string

that is inside this text node which is

inside of the house tag so this is the

string right here so first house element

get the text node get the nodes value

that's what we're putting inside of here

now I can say li dot text content is

equal to house then we'll append that to

our list

so appendchild Li

okay right so we're not seeing any list

items appear over here and that is

because when we searched for the house

element I was just pointing over here

and thinking over here

but we're actually finding these inside

of this XML object this document here

which we passed in that was the point of

passing this in so this should be an X

this is the XML document that we're

searching for those house elements

inside of something now if i refresh

this there we are now I've got this

unordered list of houses showing up

fantastic okay now for the sword what I

want to do here very similar thing but I

want to put both the text here and the

value from the attribute so we'll get

both of those things so we'll call

another function build sword list and

we'll pass the XML document over to that

as well

so this is gonna work almost the exact

same way I'm gonna copy this to save

some time and some typing get element by

ID it's not houses it's swords is the

list that I'm gonna build there we

aren't and I don't want to find a house

I want to find a sword so that's all the

tags and this will be swords so swords

in the XML document find all the tags

called sword so the first time through

the loop we are finding this element

right here so this element plus it's

text node plus the attribute so all

those things are gonna be inside of this

variable down here called swords

actually going to turn this live preview

off so it stops jumping my page up and

down okay we're going to loop through

swords we're gonna create the list item

and so let's say sword name is gonna be

swords first child node value okay so

that's widows wail this text node right

here it's node value that string is

gonna be the sword name and then person

is going to be swords sub I so right

here this sword and now I want to get

the value of this attribute so we will

call get attribute simple enough owner

there this method will return the value

of this attribute which will go inside

there and now the text content is going

to be and let's use a template string so

I want the sword name followed by a

space a - a space and then the person

okay and then append to the list that

list item and we'll come back here and

we will refresh and there we are there's

the sword name there's the person sword

person and sword persons or person all

the way through extracted from here so

here's an example of just getting the

node values from attack

note and here's an example of getting

the text note as well as the value from

an attribute and that's really all you

need to be able to work with XML files

and extract the bits and pieces that you

want I hope that helps you out if you

found that useful please share and as

always thanks for watching