Fetching and Reading XML Data

This video shows how you can use the fetch( ) method to do an AJAX call and retrieve and XML file and then read the data from inside that file.
It covers the differences between working with JSON and XML data from an API
JS Code GIST: gist.github.co...
XML Code GIST: gist.github.co...
Video on XML: • Introduction to XML

[@gabrielfono844]

sir you just saved you really really saved me. when I started teaching myself two years ago , I was always watching your videos and felt super good. I first wanna announce you that I have been working as full stack engineer the last five months and it is my first job. I recently thought about an app that I wanted to build and the response from the external api were on xml format and I was stuck . now , I know how to solve it for sure. I will publish that app here next week thanks

[@SteveGriffith-Prof3ssorSt3v3]

That's fantastic news! I'm very happy for you.

[@gabrielfono844]

@@SteveGriffith-Prof3ssorSt3v3 thanks sir Thanks so much You have no ideas how you saved me Again Thanks Love from Herndon Virginia, 🇺🇸

[@rebelmachine88]

This changed my life, thank you Steve! I wish I had found this video 10 months ago!

[@Zanehoward88]

my alarm report provider is getting this back from one of our devices. I checked the internet files in the device and they all have the xml.cgi file in the device but they keep getting this error on just this one of the five devices. Any ideas of what this might mean. I am not an xml expert at all and very new to this. What may be missing or what i need to check in the device. Error: INV ID Error: INV ID

[@rebelmachine88]

@@Zanehoward88 Where does this error show up and how are you accessing it?

[@LucasSantana-fv3wu]

Your video helped me with a mistake I had been trying for days! Thanks from Brazil!

[@TakshvysDad]

amazing lecture.. i am fan of your voice.. :)

[@riccardofoglio9140]

Thank you so much! This was exactly what I have been looking for all day!

[@mariumbegum7325]

Great video, i will be watching more!

[@gabrielfono844]

I really appreciate your video I am currently building an application for help people find domain name easily. most of the api I see come in xml format. thanks

[@ieatdata2327]

thanx a lot Steve! appreciate all your hardwork..thank you so much

[@Zanehoward88]

my alarm report provider is getting this back from one of our devices. I checked the internet files in the device and they all have the xml.cgi file in the device but they keep getting this error on just this one of the five devices. Any ideas of what this might mean. I am not an xml expert at all and very new to this. What may be missing or what i need to check in the device. Error: INV ID Error: INV ID

[@PacoRomog]

Excelent video! This saved me big time for a project..Thanks!

[@mohamedsadik84]

AMAZING WORK , that was outstanding my friend keep them coming ....

[@Zanehoward88]

my alarm report provider is getting this back from one of our devices. I checked the internet files in the device and they all have the xml.cgi file in the device but they keep getting this error on just this one of the five devices. Any ideas of what this might mean. I am not an xml expert at all and very new to this. What may be missing or what i need to check in the device. Error: INV ID Error: INV ID

[@johnnya1717]

what a soothing voice

[@ulizumbi4615]

God bless you🙏

[@SunilVerma-dp9lf]

My god, u explained all these so well. Thank u so much

[@javivazquez2760]

I love you from Spain ❤

[@MythicStealth]

Subscribed. You explain things very well.

[@darwinmanalo5436]

Very helpful. Thanks.

[@soniablanche5672]

basically: fetch it as text, then pass it to the javascript xml parser to create a DOM-like object

[@SteveGriffith-Prof3ssorSt3v3]

Yea.

[@oed572]

Thank you for this.

[@sakshijain6532]

hey. I am getting this error in method fetch(): Fetch API cannot load read.xml. URL scheme must be "http" or "https" for CORS request.

[@Fireskull210]

same here :(

[@bobmanmen5000]

same

[@bigmancozmo]

The fetch method MUST use an http or https request but XMLHttpRequest can use a local file

[@SteveGriffith-Prof3ssorSt3v3]

Yes. The Fetch API has increased security that prevents loading local files. You have to use XMLHttpRequest to load local files.

[@spicyLEGO]

@@SteveGriffith-Prof3ssorSt3v3 I spent an hour trying to make fetch work on my local machine lol

[@chrisles9000]

I have copied the exact same example and I get logged in the console the error: "error on line 1 at column 1: Extra content at the end of the document". Can someone help me with this ?

[@weeseenman2248]

thanks man. good job 👏

[@srayanray3815]

great video !! love it!!

[@mikunea]

Thanks, Steve. A great video that I was able to put into action right away. One question remains: Why can I only use the variable xml within this function? Everything that comes after this function has no access to the variable xml anymore.

[@SteveGriffith-Prof3ssorSt3v3]

The variable is declared inside the function so it is local to the function. You can declare a global variable OR pass the value to some other function.

[@mikunea]

@@SteveGriffith-Prof3ssorSt3v3 Thank you for your quick response. Yes, I have tried to declare the variable xml before the function, but it does not help. This variable does not seem to behave as usual. I don't want to use you to solve this, but I would be glad if you help me. I am willing to pay for your time.

[@SteveGriffith-Prof3ssorSt3v3]

@@mikunea the value of the XML variable is assigned asynchronously. You can't access its value until after the fetch is resolved. You are likely having an issue with the promise, not the variable

[@mikunea]

@@SteveGriffith-Prof3ssorSt3v3 Would you please have a look to this test page pebwebcdn.ch/testXML/test.html I have two alerts on lines 234 - 237 outside the function that do not work. If you click on a table row and then close the window that was opened with it again, the two alerts from row 242 - 245 should indicate. At this thime the fetch should be resolved.

[@garrylove8955]

This video helped me a tonne but I want to add an upload input from my HTML page and grab my XML file from that. How do I go about doing this?

[@SteveGriffith-Prof3ssorSt3v3]

You want to upload a file? kzbin.info/www/bejne/gKWuepanj8l_gq8 Want to create files? kzbin.info/www/bejne/sKKVqXdjrdp8fZY

[@MrMarkgyuro]

what is happening with the body.text() API. It returns a text in a Promise object? I am a bit confused : ) or it returns a Promise that is immediately resolves with a text?

[@SteveGriffith-Prof3ssorSt3v3]

The response object contains a body object and inherits the text(), json(), blob() methods. Each of those methods is an async method that returns a promise. The promise will resolve into the data from inside the body. When the promise resolves the next then() runs.

[@MrMarkgyuro]

@@SteveGriffith-Prof3ssorSt3v3 thank now it is clearer :D

[@metifu]

Hi Steve, Great tutorial!! two questions: 1: In order for this to work do you need a local server running? 2: Can this be done without running a local server?

[@SteveGriffith-Prof3ssorSt3v3]

To use fetch( ) you need a server because it needs to be done over http or https. If you are using VS Code then the Live Server plugin will give you that.

[@metifu]

@@SteveGriffith-Prof3ssorSt3v3 Thanks Steve, so is there a way to make this work without a local server? for example in A.S3.0 I can load and xml and extract strings in to textarea components. Is there away to achieve this with js, json?

[@SteveGriffith-Prof3ssorSt3v3]

@@metifu the only way to make an AJAX request locally in the browser is with the old pre-fetch XMLHttpRequest object. It doesn't have the same security restrictions. However, it does have more restrictions on mobile. JS files can be imported directly using ES Modules in the browser without a web server. However, web technologies have been and are increasingly more restrictive when it comes to accessing any files on the local file system. This is why you need a web server. Consider using a web server for your data files. The same one as delivers your HTML file. Then turn it into a Progressive Web App which allows for cache management and local storing of files or data via indexedDB.

[@JeffParker45]

What about a multi layered XML file? Instead of Attributes, it just uses another nested element?

[@SteveGriffith-Prof3ssorSt3v3]

Most xml files have both.

[@tejkumarkempaiah6380]

Thanks for the wonderful work! I want to parse XML elements which is not in the file format but is the response for the API call. Can you please share video parsing the XML nodes, elements for the API response where response is in XML format ?

[@SteveGriffith-Prof3ssorSt3v3]

That is exactly what this video shows. It does a fetch call to retrieve an XML file, just like calling an API and getting an XML response. Then the second part of the video is parsing the XML response.

[@nikodixon7187]

Great video - although I came here looking for a solution that doesn't require a browser setting. I'm trying to parse XML API responses with Node...without the use of external libraries. I haven't found anything that works yet.

[@SteveGriffith-Prof3ssorSt3v3]

Well, this video is about client-side fetching and reading API responses, not Node. I have another video about making api calls from Node - kzbin.info/www/bejne/qJmaoKOMnql5g9E - although it doesn't specifically go into parsing XML in Node. There is no built-in parser for HTML or XML documents in Node. You would have to create your own parser or use one of the many available packages.

[@sully236]

Thank you very much for the great vid! Question though... It seems to work well on Google Chrome, but older versions of IE are throwing a syntax error. My organization is running compatibility mode for IE8. Any suggestions on getting this to work with IE8 or am I out of luck?

[@SteveGriffith-Prof3ssorSt3v3]

If you are stuck supporting old versions of browsers then you won't be able to use the ES5 features like Promises and fetch( ). You will have to use the old XMLHttpRequest object to do your data fetches. Unfortunately, I haven't done any videos on using that approach because I haven't had to teach it in class for the last 3 years. It can be done though, I was doing this back when developing for IE 5.5.

[@sully236]

Steve Griffith thanks, that’s what I figured. We’ll be upgrading soon. Maybe I can hold the customer off 😂. Thanks for the reply and thanks again for the vid. Great audio!

[@Toobshub]

hey steve, i want to build a tool/ service with laravel, fetching XML file from external coupling system. The service must be able to tell a front-end in a simple way which fields and values ​​are possible. Do you have a video regarding something like this.

[@SteveGriffith-Prof3ssorSt3v3]

I have no videos with Laravel.

[@secretaryofstate1]

Great vid I had to sub

[@masafak]

Hello, i have an XML file and there are a lot of links for pictures taht i want download. how can i do that easy with a script or something? i can not program, can someone help please?

[@SteveGriffith-Prof3ssorSt3v3]

This tutorial is all about how to write the script so you can do things like that.

[@Zanehoward88]

my alarm report provider is getting this back from one of our devices. I checked the internet files in the device and they all have the xml.cgi file in the device but they keep getting this error on just this one of the five devices. Any ideas of what this might mean. I am not an xml expert at all and very new to this. What may be missing or what i need to check in the device. Error: INV ID Error: INV ID

[@SteveGriffith-Prof3ssorSt3v3]

I have no idea what your devices or system are. What you posted is just an XML file that is giving an error code 39. That code has something to do with whatever your system is, not XML.

[@RicardoManuelArana]

Hey, Steve, I'm sorry but I don't get to parse an object that needs to be parsed. So I'm using JSON Server now, my object is being properly served on localhost. myObjectsArray = []; if ( myObjectsArray.length === 0 ) { url = 'localhost:3000/object' ; requestedData = new XMLHttpRequest() ; requestedData.open('GET', url, true) ; requestedData.send(null); if ( requestedData.readyState === requestedData.DONE ) // both values resolve to 4 { objectToParse = JSON.parse(requestedData.responseText) ; myObjectsArray.push(parsedObject) } } But the Object just won't be parsed. But by doing it manually as myObjectsArray.push(ObjectToParse) in the console.log, it works just fine. Any ideas?. I'm about jumping off the Golden Bridge, lol.

[@shivamahuja840]

Sir can you tell me one thing how can I create api for querying my xml file I have already created a parquet file or let's say I have created a data frame how to do that

[@SteveGriffith-Prof3ssorSt3v3]

Please add any tutorial ideas in the comments here - kzbin.info/www/bejne/gnTIq5SuZ9qBacU. Be sure to include details of exactly what you mean.

[@kiracrossings]

I just got a xml price feed without id or Attribute, Can i use it as api or should i try and import it to a database? (the scales part is giving me alot of trouble) product id euro 6 500 5.80 1000 5.65

[@SteveGriffith-Prof3ssorSt3v3]

You can use it just like data from any API. Just remember to use document.getElementsByTagName() as the method to find the various elements like , , etc. You can use firstElementChild, parentElement, or .children properties too. Things like id and class only work in HTML, not XML.

[@kiracrossings]

@@SteveGriffith-Prof3ssorSt3v3 Got it working, You are awesome.... thanks

[@motiveko280]

thx bro!

[@iPranav007]

I am getting "Fetch API cannot load. URL scheme must be "http" or "https" for CORS request.". Any solution ?

[@SteveGriffith-Prof3ssorSt3v3]

The URL you request must start with http or https.

[@MarvBudd]

I get an error on the fetch(url): Cross-Origin Resource Sharing (CORS). Why does it work for you and not me?

[@SteveGriffith-Prof3ssorSt3v3]

Are you running the page through a server? Such as the Live Server extension in VSCode? It won't work unless the HTML file and the fetch for the XML file are both going through http/s from the same domain.

[@MarvBudd]

@@SteveGriffith-Prof3ssorSt3v3 I am just using Chrome to open the file at it appeared you showed on the browser’s own file system. Wrong?

[@SteveGriffith-Prof3ssorSt3v3]

@@MarvBudd It doesn't work on file:// only if the url starts with

[@MarvBudd]

@@SteveGriffith-Prof3ssorSt3v3 I found the extension. Thank you!

[@bigmancozmo]

I followed it but i get two errors: "index.html:18 Fetch API cannot load file:///Users/jasonmcneil/Desktop/website-with-XML%3F/xml/data.xml. URL scheme must be "http" or "https" for CORS request." and "(anonymous) @ index.html:18 index.html:18 Uncaught (in promise) TypeError: Failed to fetch at HTMLDocument. (index.html:18)"

[@SteveGriffith-Prof3ssorSt3v3]

The second error is caused by the failure due to the first reason. You can't use fetch( ). You have to use XMLHttpRequest. kzbin.info/www/bejne/o32vZqOafsekjcU

[@bastianlontsi6942]

Please How cann i save my xml data after i change somthing

[@SteveGriffith-Prof3ssorSt3v3]

That depends on how you are changing it, where you are changing it, and where you want to save it. Client side? - as a local xml file with the Cache API... - as a JSON string in localStorage... - as data in a local IndexedDB... Server side? - uploading the file with fetch( ) - and then it depends on which server side programming language that you are using - is the data being saved as an XML file? - is the data being put back into a database? which database?

[@bastianlontsi6942]

@@SteveGriffith-Prof3ssorSt3v3 thanks for your answer, i wan to save it in Client side with angular

[@kylerbriskey372]

Great video! I am running into a problem though. I've got my code setup just like yours except I'm trying to push the string of elements to an array declared OUTSIDE of the function to access it later. To do this: var array = []

[@SteveGriffith-Prof3ssorSt3v3]

You can't run your build array function and access the XML until after the fetch runs. Populate array inside the second then( ) after fetch.

[@kylerbriskey372]

@@SteveGriffith-Prof3ssorSt3v3 Thank you for the quick reply! I tried what you suggested and I still get a blank array. Here's the code. var array = [] fetch('xml-files/Aline_World.xml') .then(response=>response.text()) .then(data=>{ let parser = new DOMParser(); let xml = parser.parseFromString(data,"application/xml"); var elements = xml.getElementsByTagName('rvXMLfilename') array.push(elements) }) console.log(array)

[@SteveGriffith-Prof3ssorSt3v3]

@@kylerbriskey372 the console.log has to be in there too. After the fetch.then.then.catch means it runs before the response is back

[@kylerbriskey372]

@@SteveGriffith-Prof3ssorSt3v3 Okay thanks. I don't think that will work for me since I'm trying to then use that array in a different function to build my SQL database. Thanks for the info and the great video.

[@SteveGriffith-Prof3ssorSt3v3]

@@kylerbriskey372 you can call other functions from inside there and pass the array from there

[@gabrielisaacriverorodrigue566]

Hi, how do I read multiple XML in java?

[@SteveGriffith-Prof3ssorSt3v3]

Java? or JavaScript?

[@gabrielisaacriverorodrigue566]

@@SteveGriffith-Prof3ssorSt3v3 Java, thanks for your interest, I already solve it, I made an array of files, used a for loop and my method to parse an xml.

[@fastedeverything8555]

Dude. You should work for Lambda School.

[@SteveGriffith-Prof3ssorSt3v3]

I work for Algonquin College

[@fastedeverything8555]

@@SteveGriffith-Prof3ssorSt3v3 Cool! but your teaching style is well suited to the tradeschool style Lambda is going for. If our in the market Lambda is going places.

[@bigmancozmo]

0:20 Lol GIMP still uses XML

[@SteveGriffith-Prof3ssorSt3v3]

There is still lots of XML being used today. JSON just became a quick favourite of web developers and that impacted other industries.

[@bigmancozmo]

Steve Griffith oh by the way I have a question. how do downloaded apps fetch local json files?

[@SteveGriffith-Prof3ssorSt3v3]

@@bigmancozmo the fetch method doesn't allow for local files but the XMLHttpRequest object does

[@levreg]

BUUUUUUUUUUUUUUUUUUUUUUUUUUT how do you read it - as if a document that everyone can read, not a coder.

[@SteveGriffith-Prof3ssorSt3v3]

kzbin.info/www/bejne/eZq7lnihl8-Sr8k

[@bastianlontsi6942]

Salut et merci pour la vide, moi je voudrai enregistrer mon xml fichier apres avoir effectuer des changement, enregistrer avec un nom que J'AURAIS MOI MEME DEFINIR HIER IS MY CODE download(form:NgForm){ this._http.get('/assets/0871.xml', { headers: new HttpHeaders() .set('Content-Type', 'text/xml') .append('Access-Control-Allow-Methods', 'GET') .append('Access-Control-Allow-Origin', '*') .append('Access-Control-Allow-Headers', "Access-Control-Allow-Headers, Access-Control-Allow-Origin, Access-Control-Request-Method"), responseType: 'text' }) .subscribe((data) => { console.log(data) // @ts-ignore return new File(data,"8071.xml"); const parser = new DOMParser(); const parser1 = new XMLDocument(); const xml = parser.parseFromString(data,"text/xml"); console.log(xml) //Autre funktion // @ts-ignore xml.getElementById("name_anschrift").textContent = form.form.value.name_anschrift+ " "+form.form.value.rechtform; // @ts-ignore xml.getElementById("name_anschrift2").textContent = form.form.value.name_anschrift2+ " "+form.form.value.hausnummer; // @ts-ignore xml.getElementById("name_anschrift3").textContent = form.form.value.ort+ " "+form.form.value.name_anschrift3; // @ts-ignore xml.getElementById("tag").textContent = this.datepipe.transform(form.form.value.tag,'ddMMyyyy'); // @ts-ignore xml.getElementById("087").textContent = form.form.value.kreuz1.name === "Neuanmeldung"; // @ts-ignore xml.getElementById("kreuz4").textContent = form.form.value.kreuz1.name==="Änderung"; // @ts-ignore xml.getElementById("eori").textContent = form.form.value.eori; // @ts-ignore xml.getElementById("eori2").textContent = form.form.value.eori2; }); }