JavaScript JSON Parse Tutorial - What is it and how to use it?

In this tutorial, you’ll learn what the JavaScript JSON parse function does and how to use it in your code. Recommended training (Free for 7 days) : juniordevelope... 👍
The JavaScript JSON parse function is something you’ll become quite familiar with and use frequently within your code. This is especially true if you’re writing code outside of a framework like React / Angular / Vue.
So the first question you probably have is ‘What does the JavaScript JSON parse function do?’ Well, the answer is quite simple once you understand the difference between JSON and JavaScript objects.
I’ll clear that up for you first in the tutorial where we see how JSON data is really just a string representation of an object which means you can’t access it’s properties directly. Only real JavaScript objects can be accessed in this way.
Knowing the difference between JSON and JavaScript objects, it’s easy to work out that the JSON parse function simply takes a JSON string and converts it to a real JavaScript object so that we can access it’s properties.
In the rest of the tutorial we’ll look at working with JSON data from remote calls (like JSON sent back from an API) using JavaScript JSON parse from url, and how the data needs to be parsed when returned in a string-like format.
We’ll also go through another example using the Fetch API to retrieve data and you’ll see how, if you use this technique to retrieve external data, you don’t actually need the JavaScript JSON parse function.
Finally, in our JavaScript JSON parse tutorial, you’ll learn about the one common mistake that a lot of new developers make when working with JSON data, particularly when not handling a JavaScript JSON parse error. It’s necessary a lot of the time to to check the data you are trying to parse is valid JSON as passing in an invalid string will cause an error. With the two remote call examples, i’ll show you how to handle these types of errors and make sure your JavaScript code continues gracefully. Channel Handle @codebubb

[@codewithbubb]

Learn how to use ES6 Arrow Functions here: ua-cam.com/video/OzZpVcShV7Y/v-deo.html

[@chrislauer6222]

Jesus, I been trying to find the answer to the most basic of questions and u answered in the first 3 mins. I just want to say thanks!

[@Mona001-01g]

Haha, just noticed your comment after writing mine. I second your comment. Amazing how the internet confuses us and refuses to answers most basic questions in a straightforward manner. They are making us read before teaching the A,B,C's

[@TheMetalHeadbangger]

@@Mona001-01g THIS! so much its sometimes really hard to find straight answers when its buried under 100 hoops that you have to jump through.

[@Mona001-01g]

I just had to pause the video to write this comment. This video is god sent. Some of the questions that were buggin me about json are finally answered here. A million thanks for this!!

[@codewithbubb]

Cheers Shruti! Glad you found the video useful.

[@jimmyopot1972]

You literally helped me in a WebSocket project I'm building, parsing the WebSocket JSON data...thank you.

[@codewithbubb]

Ah great. What project are you building?

[@cebuanoninoy]

Thank you very much the data.json() answers one of my question when you are using fetch.

[@shivamgarg3491]

It has clear my actual doubts 😊

[@TheMetalHeadbangger]

this was a great help Thanks!

[@codewithbubb]

Cheers! Thanks for the feedback.

[@HappyMomof8]

Excellent! Thank you!

[@shubhamarora547]

thanks sir👍👍

[@codewithbubb]

You're welcome! Glad you found it useful :)

[@marcusbarnes7249]

Great video

[@codewithbubb]

Thanks Marcus! Appreciate the support 😀

[@Mona001-01g]

What is the difference between json.parse() and jackson library's object mapper class?

[@codewithbubb]

Is that a Java class / library ? I'm afraid i'm not that familiar with Java.

[@rishengopaldass1103]

Hi Guys.
How do we save HTML form data to JSON?

[@ITUCs]

Thank for video. Bu i have a question. If you not know name of attributes (like >> 'name' or 'languages') how do you parse json ?

[@ITUCs]

you use in code like this >> parseData.name But suppose you don't know that the name of this property is name . How would you parse the data in json in this case ? i hope you understood my question :)

[@heloisaangeli8331]

@@ITUCs that is exactly my problem, idk how i can do this, did you find the answer?

[@ITUCs]

@@heloisaangeli8331 me too bro :/ i didn't

[@heloisaangeli8331]

@@ITUCs i found a way to get these values:
let parseJson = JSON.parse(content)
Object.keys(parseJson[i])
*(add the [i] only if it is an array of objects, otherwise i think it works without it)
This way you can get the keys like name or languages, it helped me with what i need, hope it can help you as well

[@pjmclenon]

Hello when I use json.parse () while I don't get errors i also don't get any output in the console
Is that because I didn't include link to jQuery?
If so which jQuery link do we need to include?
Thanks alot Lisa

[@_meta_data_9992]

От простого к сложному: ua-cam.com/video/w9UuJprl-Sw/v-deo.html

[@The_Pariah]

Asking for likes and subscribes before the video has even started is extremely cringe.
Probably a good idea to save that until the end when we can actually ascertain if the like and sub are worth it.
Unfortunately, I chose to not bother watching the video b/c of it.

[@codewithbubb]

Hi thanks for the feedback. I actually totally agree with you (this is an older video and I don't really do that anymore).

[@The_Pariah]

@@codewithbubb That's fantastic to hear, my dude. Good choice.
I've also upped a couple of your other posts to help get you some more visibility.
Stay up. :)

[@idontcare8741]

Zio pera, ho visto 100 video di voi che vi create i dizionari e nessuno che cazzo carica un fottuto file con javascript.

[@Vball2718]

10 minutes to explain what, a single function? Waste of time, but, you hit all your keywords in the description. Hey, want to get hired as a senior react or angular developer? Just learn JSON.parse and you'll be well on your way.

[@codewithbubb]

My thought was that if someone is searching for (or is at least interested in) a video on JSON.parse then they're really unclear on what it actually is /does. Hence why the video is a bit overkill with the details and examples etc.

[@mohamadybr]

@@codewithbubb Actually, I wanted a clear description of what is JSON and this video is exactly what I was looking for, especially when u mentioned the little mistake that new developers do, that saved me from failing my assignment at uni because I had this problem in my JSON document and it kept giving me the error u got but I couldn't find a clear description on why it is giving the error and how to fix it. Luckily, I found ur video and now I am a subscriber. Thanks a lot.

[@codewithbubb]

@@mohamadybr Cheers for the feedback! Yeah, I only make videos that are aimed at helping people out so thanks for sharing your story - that's quite inspirational. Glad you got your Uni project done - what did you make?

[@monolithworldline]

@@codewithbubb What you do in this video is now deprecated.