The Web Developer Bootcamp 2024

Colt Steele

Back to Ajax Index Page

JSON Introduction

What is Json

Json is an acronym for JavaScript Object Notation. It is a lightweight data-interchange format which is easy for humans to read and write, and it's easy for machines to parse and generate.

JSON is a text format that is completely language independent, but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.

JSON is built on two structures:

  • 1). A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
  • 2). An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

The Json format is very similar to JavaScript Objects and Arrays with one difference being that the Object keyName must be included within double quotes (single quotes will not work).

For example, if we make a JavaScript Super Hero Object, it might look something like this:

  • JavaScript
  • superHeroes {
    • squad: 'Super Squad',
    • home: 'Metro',
    • base: 'Secret Tower',
    • active: true,
    • members: ['Molecule Man', 'Madame Uppercut', 'Eternal Flame']
  • }
and the Super Hero JSON would look like this:
  • JSON
  • superHeroes {
    • "squad": 'Super Squad',
    • "home": 'Metro',
    • "base": 'Secret Tower',
    • "active": true,
    • "members": ['Molecule Man', 'Madame Uppercut', 'Eternal Flame']
  • }
Notice the double quotes around the Object keyNames. More JSON information can be found here, and a Json Formatter & Validator can be found here.

.parse() & .stringify()

If we had sent an http request for the data from our superHeroes example above, the web api might return "json" data that would look something like this:

  • '{"superHeroes":{"squad":"Super Squad","home":"Metro","base":"Secret Tower","active":true,"members":["Molecule Man","Madame Uppercut","Eternal Flame"]}}'
and because we're familiar with how to interact with JavaScript Objects, we know that we can pull out individual pieces of data. Say we wanted to pull out the base name. In a JavaScript Object, we would just call:
  • superHeroes.base
and it would return Secret Tower.

But this will not work with json data because if you notice, the entire "object" is incorporated within a pair of quotation marks. The entire json object itself, is a string.

So what we need to to is convert the string into a useable object and JavaScript gives us the perfect tool to accomplish this.

.parse()

JSON.parse() method, parses a JSON string according to JSON grammar, and then evaluates the string as if it is a JavaScript expression.

So in our superHeroes example, let's save the json data we received from the http request to a variable:

  • const data = '{"superHeroes":{"squad":"Super Squad","home":"Metro","base":"Secret Tower","active":true,"members":["Molecule Man","Madame Uppercut","Eternal Flame"]}}';
so data equals our returned json data, and we can now parse this data and assign it to a variable :
  • const parsedData = JSON.parse(data);
**Notice that we had to use capitalization for JSON

parsedData now equals our JavaScript Object superHeroes:

  • superHeroes:
    • active: true
    • base: "Secret Tower"
    • home: "Metro"
    • members: (3) ['Molecule Man', 'Madame Uppercut', 'Eternal Flame']
    • squad: "Super Squad"
And just like any normal JavaScript Object, we can pull out the individual pieces of any data that we want:
  • parsedData.superHeroes
returns {squad: 'Super Squad', home: 'Metro', base: 'Secret Tower', active: true, members: Array(3)}

and,

  • parsedData.superHeroes.base
would now return Secret Tower.

.stringify()

The JSON.stringify() method, does exactly the opposite of JSON.parse(). It converts a JavaScript value into a JSON string, optionally replacing values if a replacer function is specified, or optionally including only the specified properties if a replacer array is specified.

So if we have a JavaScript Object and we need to send the object's data to a Web API, and that API requires the data to be in JSON format.

First we define our object:

  • JavaScript
  • const sHeroes = {
    • squad: 'Super Squad',
    • home: 'Metro',
    • base: 'Secret Tower',
    • active: true,
    • members: ['Molecule Man', 'Madame Uppercut', 'Eternal Flame']
  • }
and then we .stringify() our Object:
  • const stringifiedHeroes = JSON.stringify(sHeroes);
stringifiedHeroes now equals:
  • '{"squad":"Super Squad","home":"Metro","base":"Secret Tower","active":true,"members":["Molecule Man","Madame Uppercut","Eternal Flame"]}'
which is out JavaScript Object in JSON format.

Back to Top