As I continue working on personal projects, I seem to use more and more external API’s. Because of these API calls, I wanted to get into more detail on the JSON responses.

JSON stands for JavaScript Object Notation. Though its syntax looks similar to JavaScript, many other programs and environments are able to parse JSON as a dataset.

In my experience this far into my career, a lot of my API calls are returned using JSON, as indicated in the code I use below.

Now this is a very basic fetch to an external URL, which I’ve made a variable called “searchUrl”. The request is returned as a HTTP response, which the JSON piece is parsed out in line 16. Here’s a previous example of what a JSON response that has been parsed may look like, using the application Postman.

This does continue past the page I posted above. Luckily for you, me, and every other developer, we don’t have to read this as is, and there are any number of tools to make it more readable, including the Postman software I have been using.

As shown, this format is much easier, and we are able to better tell the structure of the JSON response. As you can see, JSON is stored in arrays and objects, and those objects being stored in key/value pairs. For example, the recipe above uses many attributes for each recipe: title, image, id, etc. As you can see in my code above, this entire JSON response can be stored as a variable (in my case, using the state hook in React).

Flatiron School DC. Learning to code one day at a time.