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) : juniordevelopercentral.com/treehouse 👍

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