Javascript JSON & JSON Objects — Moving Data Around

JSON (JavaScript Object Notation) — originating from Javascript — is now a widely-used data-interchange format supported by virtually every modern programming language and networked application. JSON uses human-readable text to describe attributes and values in a serialized (storable) fashion.

Javascript supports the storage of JSON (in serialized string format) and JSON objects (JSON converted to a Javascript variable). This blog post covers JSON basics and how to manipulate JSON via Javascript.

JSON Basics

The following is a JSON description of Japanese menu items. Each entry contains two attribute-value (or name-value) pairs: the attributes are dish and desc, each with an associated descriptive value.

[
{ "dish": "sashimi", "desc": "raw fish" },
{ "dish": "sushi", "desc": "sashimi over rice" },
{ "dish": "udon", "desc": "thick wheat flour noodles" },
{ "dish": "soba", "desc": "thin buckwheat noodles" },
{ "dish": "kare-raisu", "desc": "curry rice" },
{ "dish": "okonomiyaki", "desc": "fancy omelette" },
{ "dish": "yakitori", "desc": "things on skewers" },
{ "dish": "gyoza", "desc": "potstickers" }
]

Creating Javascript JSON Variables

There are two equivalent ways of assigning this JSON string to a variable; the first is the most compact, the JSON structure without line breaks:

let menu = '[ { "dish": "sashimi", "desc": "raw fish" }, { "dish": "sushi", "desc": "sashimi over rice" }, { "dish": "udon", "desc": "thick wheat flour noodles" }, { "dish": "soba", "desc": "thin buckwheat noodles" }, { "dish": "kare-raisu", "desc": "curry rice" }, { "dish": "okonomiyaki", "desc": "fancy omelette" }, { "dish": "yakitori", "desc": "things on skewers" }, { "dish": "gyoza", "desc": "potstickers" } ]';

The second style uses the Javascript string concatenation + operator and maintains the visual human-friendly formatting.

let menu2 = '[' +
'{ "dish": "sashimi", "desc": "raw fish" },' +
'{ "dish": "sushi", "desc": "sashimi over rice" },' +
'{ "dish": "udon", "desc": "thick wheat flour noodles" },' +
'{ "dish": "soba", "desc": "thin buckwheat noodles" },' +
'{ "dish": "kare-raisu", "desc": "curry rice" },' +
'{ "dish": "okonomiyaki", "desc": "fancy omelette" },' +
'{ "dish": "yakitori", "desc": "things on skewers" },' +
'{ "dish": "gyoza", "desc": "potstickers" }' +
']' ;

Creating Javascript JSON Objects

While one can create a Javascript JSON object by assigning it a JSON object literal:

let anObj = { "dish":"sashimi", "desc":"raw fish" } ;

It’s far more typical to parse a JSON string object with the JSON.parse() function:

let aDish = '{ "dish":"sashimi", "desc":"raw fish" }' ;
let aDishObj = JSON.Parse( aDish ) ;

Even more typical is the reading in of JSON data from an external source (rather than having hard-coded JSON strings in the program code).

Getting back to the menu example, here is the menu variable parsed and then printed:

let menu_obj = JSON.parse( menu ) ;
console.log ( menu_obj ) ;

The Javascript output will be:

{
  Japanese Menu Items:(8) [...]
}

Working With Javascript JSON Objects

Accessing Object Values

The typical workflow consists of obtaining JSON serialized text content (usually from “out there somewhere” but shown here as an assignment to a variable), using JSON.parse() to instantiate a Javascript JSON object, and then get and set the object values. The following code snippet illustrates such a workflow:

let myJSON = '{ "dish":"sashimi", "desc":"raw fish" }' ;
let myObj = JSON.parse( myJSON ) ;
 
console.log ( myObj.dish ) ; // --> sashimi

Note that the “bracket notation” style will also access the object values:

console.log ( myObj.["dish"] ) ; // --> sashimi

Looping Through A Javascript JSON Object

The bracket notation is used in this code snippet as part of the for loop to access each of the Javascript JSON object’s attributes.

for (let n in myObj) {
  console.log ( n + "'s value is '" + myObj[n] + "'" ) ;
}

The above prints out the name and value; the output looks like:

dish's value is 'sashimi'
desc's value is 'raw fish'

Looping Through An Object With An Array of Javascript JSON Values

To bring our example full circle, here’s how to loop through the entire menu:

let myObj = JSON.parse( menu ) ;
​​for (let i in myObj) {
  console.log ( myObj[i].dish + "'s value is '" + myObj[i].desc + "'" ) ;
}

let myObj = JSON.parse( menu ) ;
​​for (let i in myObj) {

  console.log ( myObj[i].dish + “‘s value is ‘” + myObj[i].desc + “‘” ) ;

}

Conclusion

This blog post covered the basics of JSON, how Javascript supports the storage of JSON in variables (in serialized string format) and JSON objects (JSON converted to a Javascript variable), and the Javascript language needed to access JSON attributes and loop through more complex JSON structures.

When creating JSON examples for exploring other uses for the functionality described above, the use of an online JSON validator will be invaluable.

Start Learning

To learn more about Javascript, check out other Javascript blog posts and enroll in our Javascript Nanodegree programs, including Intermediate Javascript.

Source Code

Complete source code, when needed to expand upon the snippets above, will be included below, ready for use in an online Javascript tester like PlayCode.