What is JSON?

JSON is an acronym for JavaScript Object Notation. It is a JavaScript object that organizes data in key/value pairs. Storing data in this manner makes these objects lightweight and language independent. This means JSON can be read by most programming languages.

JSON is commonly used to retrieve data from a server to the client side because it is  lightweight and easily read by humans and machines. In a world of consuming APIs, JSON is flexible enough to extract only the desired data from the server to the user.

Using JSON

Using JSON is a handy way to store data passed from the server to the front end of an app. Most programming languages have methods to convert data into JSON out of the box. In a JavaScript fetch request, the data response passed from the server is converted to JSON by invoking the json() method on the request. Read more about fetch requests here. 

Why would we want to convert a response to JSON anyway? A response is verbose and hard to decipher for us humans. By converting the response to JSON, we organize the data into legible key/value pairs. This makes the data more accessible via the code we write to do something with the response data.

JSON Examples

First, let’s take a look at what a response converted into JSON might look like. We are sending a fetch request to an API that tells us how many astronauts are currently in space in the example below.

fetch('http://api.open-notify.org/astros.json')
.then(response => response.json())
.then(data => console.log(data))

For our purposes, we will log the response we converted to JSON in our console.

{
    "message": "success",
    "number": 7,
    "people": [
        {
            "craft": "ISS",
            "name": "Sergey Ryzhikov"
        },
        {
            "craft": "ISS",
            "name": "Kate Rubins"
        },
        {
            "craft": "ISS",
            "name": "Sergey Kud-Sverchkov"
        },
        {
            "craft": "ISS",
            "name": "Mike Hopkins"
        },
        {
            "craft": "ISS",
            "name": "Victor Glover"
        },
        {
            "craft": "ISS",
            "name": "Shannon Walker"
        },
        {
            "craft": "ISS",
            "name": "Soichi Noguchi"
        }
    ]
}

We can see that inside this object are the keys of “message”, “number”, and “people.” The message key points to a value of “success.” This is a nice message letting us know the status of our request. 

Next, our number key points to the value 7. This is the total number of people in space. Finally, we get to our “people” key. The value of this key is an array. Inside this array are more objects with the keys “craft” and “name.” Our values to these keys are the name of the spacecraft and astronaut on board. 

JSON can be nested many times over. At this stage in our fetch request, the response has been converted to JSON and now the next step is to do something with that data. From here, we could use this data to populate a row of cards for each astronaut. What to do with the data is determined by what you want your app to accomplish.

Conclusion

To recap, we’ve learned that JSON is an object used to store data. Commonly, that data is from a server as a response in a fetch request. We’ve also learned that JavaScript comes with a json() method that will convert a response into JSON. 

For the front end of any application to use the data from a server, it must be in the JSON format. After we convert a response to JSON, we are free to build anything we would like around that data. To go further into the json() method in fetch requests, refer to this guide.