In this video, review the process of converting XML data to a JSON string. Look at popular libraries for this purpose, and the differences between them in conversions in this direction. Plus, look at round-trip conversions (where data is converted from one format to the other and then back) and the corner cases where different libraries may produce unexpected results. This video also covers best practices for implementing the conversion based on the data you're working with.
- [Narrator] Web services increasingly make data available as JSON. But it's not uncommon to encounter a data source you want to use in an app that is available only as XML. The most straightforward thing to do in this case is to convert the XML to JSON so that your app can work with it. The process is not always as straightforward as converting JSON to XML. So we're going to modify the H Plus sports website to pull data from an XML source and incorporate that into the DOM. For convenience, a string containing the XML data is stored as a variable in the people.js file.
We'll start by adding a reference to that file at the bottom of the index.html. So down here by the scripts, we'll add a script with a source value of js/people.js for our data source. And we're also going to add a reference to the XML to JSON.js file, which is in our starting files. So the source equals js/xml2json.js and we'll be using that in a bit.
So saving those changes, we'll switch over to the script.js file. And we need to make some changes to the display people function, which starts at line 30. First, we need to write a statement to convert our XML string to a DOM node. To do that, we're going to create a variable called people data node and we're going to use a new DOM parser object and we're going to use the parse from string method passing people XML as the data source and text/xml as the data type.
Now make sure here that when you reference people Xml, only the X should be capitalized to match the value of the variable in our people.js file. Next, we need a statement to convert our DOM node to JSON. So let's add a little documentation here. We'll put a comment on our first statement. Convert XML formatted string to a DOM node, just so we know what's going on. And for our second one, the one we're about to write, we need to convert the DOM node to JSON, so we'll create a variable called people data JSON and we'll use the XML to JSON method from the library that we referenced earlier, passing it the value of people data node, and then empty string to specify that we don't need output formatting.
Finally we want to convert this JSON to an object so we can easily address and use the data. So we'll add a comment convert JSON to an object and then we'll create one more variable, which we'll call parsed JSON. And we can use the standard json.parse method here and pass it people data JSON as an argument. And now let's go back and add console.log statements after each of these just so we can see the state of our data after each step.
So console.log people data node and we'll do a console.log people data JSON and finally we will console.log parsed JSON So we'll save those changes, we'll switch to the browser and reload the page. And in the console, if we scroll up, first we have our document node, then we have our JSON string, and finally we have our new object.
And if we drill into our object, we notice a couple things. There are a few conventions, or ways of representing XML as JSON. The XML to JSON library uses the Badgerfish convention which creates a key value pair for each attribute using the @ sign at the start. Something else we notice here in particular is that this P key, which contains the descriptive text for each person, contains a number of nested M elements. And unlike the rest of the XML code, where each element name is converted to a key with the contents and attributes as properties, this content is stored as a single string complete with the opening and closing M tags.
The reason for this is that it's really challenging to convert this sort of XML structure to JSON, especially in a way where we can recreate the original order based on the JSON we get. So the best practice in a case like this is to work with the whole section as a string. And in our case, that works fine, because it's going to end up back in a browser and the mark up will be interpreted. Now, this JSON is organized a bit differently than the JSON we were using previously when we had essentially a custom object containing just the data that was unique for each person card.
But we can still get what we need from this JSON. So switching back to our script.js file, and we're going to take a look at the for each method, which is going through the array of person data. So the object reference for our for each call needs to be different. So we're going to one by one replace some of these lines of code, keeping the other ones in place for reference. So instead of person data.cards, we're going to be referencing parsed JSON.people.div and then we'll go ahead with that for each function el and we have to get rid of those trailing symbols.
Next, the source attribute for the current image is stored in the image property, and nested within that in the source key. So current image.src equals el.img.@src. And we can see the browser is showing us that just typing @src is going to give us problems. So rather than using dot syntax, we need to use square bracket notation here, so we'll take that dot out, put a square bracket and a quote and then enclose that quote and that square bracket at the end.
And then we have to do the same for the remaining references. So we can comment out alt and current image.alt equals el.img and then square bracket notation @alt. Now for the three remaining statements, the code that we want to write is pretty similar to what's there already. So I'm going to make a copy of that first statement, paste it in on a new line and just make the changes I need because that reference at the beginning is all the same, but instead of this el.card info to card name, we're looking at el.div.h3 and then square bracket quote pound text.
And likewise for the next one. Instead of card info.card title, we are digging into div.h4 square bracket quote pound text. And finally, for the last one, instead of el.card text, we're looking at el p square bracket quote pound text. So that should be all the changes we need to fit our new JSON structure.
So we'll save these changes, we'll switch over to the browser and we'll reload. And if we scroll down to the people section, we can see that all the images and text are displayed just as we expect.
- Setting up the environment
- Understanding JSON data
- Preventing data theft
- Returning readable JSON
- Testing for an empty object
- Creating a basic schema with JSON schema
- Validating JSON data against a schema
- Converting between JSON and XML
- Converting between JSON and YAML