Skip to main content
X

Explore your training options in 10 minutes

JavaScript Tutorials

What is JSON?

Ryan Manchester - January 22, 2021


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.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

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 .

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Ryan Manchester

About the author: Ryan is a technical writer at Career Karma, where he covers programming languages, technology, and web development. The Texas native earned his Bachelor's of Music Composition from the University of North Texas. Ryan is currently pursuing further education in web development, aiming to graduate from Flatiron School with a certification in full stack web development. Since joining the Career Karma team in November 2020, Ryan has used his expertise to cover topics like React and Ruby on Rails.

Previous Article

How to Learn .NET

Next Article

What is a VPN?

Skip to main content