Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Interacting with data through HTML forms
- Storing data as comma-separated values
- Saving, retrieving, and displaying data as XML
- Setting up and updating JSON data
- Creating a YAML data file
- Using HTML5 data storage solutions
Skill Level Intermediate
JSON kind of grew up during the online age. So, there are a great many freely available tools available on the web. Let's take a look at three of the more useful. The first one I want to highlight is JSONLint. Which is a JSON validator. It has a very straightforward interface for either pasting in your JSON code or a URL to check. Let's give it a go by opening up our data.JSON file from the chapter 40404 folder.
So, I'll do a Select All > Copy it and then Paste it in. Now, I'll cross my fingers and click Validate and you can see down below there we have a valid JSON, looking good. So, what happens with invalid code? Well, let me remove one of the curly braces here, for example, and then press Validate Again. And now it highlights an error. A parsing error and it tells you what line to look at. Looks like the lines are a bit off here it's citing line 29.
Well, actually now that I think about it, it kind of makes sense because it just needs one more curly brace and if we put that down at the end. Won't be quite line 29 line 26 and then we do it we're back to valid. Alright. So, it does seem like it was off just a little bit but hopefully it will get close enough that you can find exactly what the issue is. Now, there are a boatload of JSON editors and viewers online, but I kind of like the one that I found at jsoneditoronline.org.
Again, the simplicity of the interface speaks to me. There is some example data, as you can see that you can work with, but let's bring in our own. So, I still have that data copied. And I'm just going to go here, select their data and get rid of it and paste in ours. Now, when I hit the Right arrow, which you see here in the middle between the two windows, it copies the code over into a tree editor. In fact, all of the JSON data is restructured into an easy to navigate tree. Lemme expand paintings, and then painting and one of the four nodes that you see there.
So, I think that's a pretty nice presentation, right? But it does more. Let me add a new entry by going over and I'm going to copy or lets say from line 16 to line 21 to make sure I get a comma there. And then, paste that in, right where I'm at. And let's change the title here, untitled 27. We'll make this a painting 5, ap 5.
Oh, let's see, this was a really good one. Make it $1950. You can see that there was an error that was flagged there because I had a comma. So, I'll get rid of the comma and let's just leave it at 19-50. Now, let me hit the Right arrow again and this time when I expand paintings, you can see that there are 5. And the one that I brought in I believe is this one. Yup, that's it. Untitled 27. We'll it looks like I also misspelled untitled. So, the cool thing about this is, I can actually go in and edit it from here.
Now, if you prefer to work in a tree representation, you can make your edits and changes on this side. Let's say oh, 1950, that might be a little bit high. Let's bring it down to 1450. Cool. Now, we'll hit the Left-facing arrow and everything is updated. Now, it's spelled correctly. And our prices have been changed. Once you're done, you can click Save and a file is still in downloaded as you can see here by the bottom of my Chrome screen.
Lets look at one last web based tool. Lets say you have a client who previously used XML but wants to switch to JSON. How do you convert the data from one format to another? Well, you use an online XML to JSON converter, of course. I like the one at utilities-online.info because it swings both ways. You can go from XML to JSON or if you need to, JSON to XML. Lets try it out. So, in my code editor I also have the data.XML file.
I'll do a select all copy, head back to my XML to JSON; JSON to XML converter I'll click into the XML side and then paste it in. Let me scroll down a little bit here so we can see everything, and then I'll hit the Right arrow to convert it to JSON format. Et voila, as the french coders say and, of course, if you've got JSON data and you want it in XML format you can go the other way. Easy peasy, as Brit coders of a certain age might say.
Well, that's a very brief overview of some of the online tools available for JSON. As I said, there are a great number out there. Just do a quick search and you're sure to discover one that fits your needs.