This site is mobile accessible. Press the "Tap Here" button to use a different font-size.

Smartphone icons created by Freepik - Flaticon

18.7 JSON Objects

This is a JSON string:

'{"name":"John", "age":30, "car":null}'

Inside the JSON string there is a JSON object literal:

{"name":"John", "age":30, "car":null}

JSON object literals are surrounded by curly braces {}.
JSON object literals contains key/value pairs.
Keys and values are separated by a colon.
Keys must be strings, and values must be a valid JSON data type:
- string
- number
- object
- array
- boolean
- null
Each key/value pair is separated by a comma.
It is a common mistake to call a JSON object literal "a JSON object".
JSON cannot be an object. JSON is a string format.
The data is only JSON when it is in a string format. When it is converted to a JavaScript variable, it becomes a JavaScript object.

JavaScript Objects

You can create a JavaScript object from a JSON object literal:

Example 1: JSON Objects - Creating an Object from a JSON Literal part 1

myObj = {"name":"John", "age":30, "car":null};

Normally, you create a JavaScript object by parsing a JSON string:

Example 2: JSON Objects - Creating an Object from a JSON Literal part 2

myJSON = '{"name":"John", "age":30, "car":null}';
myObj = JSON.parse(myJSON);

Accessing Object Values

You can access object values by using dot (.) notation:

Example 3: JSON Objects - Access a JavaScript Object part 1

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
x = myObj.name;

You can also access object values by using bracket ([]) notation:

Example 4: JSON Objects - Access a JavaScript Object part 2

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
x = myObj["name"];

Looping an Object

You can loop through object properties with a for-in loop:

Example 5: JSON Objects - Looping an Object part 1

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);

let text = "";
for (const x in myObj) {
  text += x + ", ";
}

In a for-in loop, use the bracket notation to access the property values:

Example 6: JSON Objects - Looping an Object part 2

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);

let text = "";
for (const x in myObj) {
  text += myObj[x] + ", ";
}

JavaScript Fundamentals course home
Module 18. JS JSON

Navigate this module

Eventually the navigation links, above, will be replaced by these << (previous) and >> (next) buttons below.

JavaScript icons used in the buttons provided by ICONS8.COM. Smartphone icons created by Freepik - Flaticon

Example files created in this module:
JSON Syntax - Access a JavaScript object part 1 JSON Syntax - Access a JavaScript object part 2 JSON Syntax - Modify a JavaScript Object part 1 JSON Syntax - Modify a JavaScript Object part 2 JSON Parse - Parsing JSON JSON Parse - JSON From the Server JSON Parse - Array as JSON JSON Parse - Parsing Dates part 1 JSON Parse - Parsing Dates part 2 JSON Parse - Parsing Dates part 3 JSON Stringify - Stringify a JavaScript Object part 1 JSON Stringify - Stringify a JavaScript Object part 2 JSON Stringify - Storing data in local storage JSON Stringify - Stringify Dates JSON Stringify - Stringify Functions part 1 JSON Stringify - Stringify Functions part 2 JSON Objects - Creating an Object from a JSON Literal part 1 JSON Objects - Creating an Object from a JSON Literal part 2 JSON Objects - Access a JavaScript Object part 1 JSON Objects - Access a JavaScript Object part 2 JSON Objects - Looping an Object part 1 JSON Objects - Looping an Object part 2 JSON Arrays - Create JavaScript Arrays JSON Arrays - Create JavaScript Arrays part 2 JSON Arrays - Accessing Array Values JSON Arrays - Accessing Array Values in Objects JSON Arrays - Looping Through an Array JSON Server - Sending Data to a Server JSON Server - Receiving Data from a Server JSON Server - JSON From a Server JSON Server - JSON returned from a server as an array: JSON Server - Get JSON Data from a PHP Server part 1 JSON Server - Get JSON Data from a PHP Server part 2 JSON Server - Get JSON Data from a PHP Server part 3 JSON Server - Get JSON Data from a PHP Server part 4 JSON Server - Get JSON Data from a PHP Server part 5 JSON HTML - Make a table based on JSON data JSON JSONP - Request JSON using the script tag JSON JSONP - Dynamic Script Tag JSON JSONP - Callback Function