JSON Objects

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

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 contained by curly braces {}.

JSON object literals consist of key/value pairs.

Keys and values are separated by a colon.

Keys must be strings, and values should 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. As soon it is converted to a JavaScript variable, it becomes a JavaScript object.

JavaScript Objects

Create a JavaScript object from a JSON object literal:

Example

<!DOCTYPE html>

<html>

<body>

<h2>Creating an Object from a JSON Literal</h2>

<p id=”demo”></p>

<script>

const myObj = {“name”:”John”, “age”:30, “car”:null};

document.getElementById(“demo”).innerHTML = myObj.name;

</script>

</body>

</html>

Output

Creating an Object from a JSON Literal

John

normally, you create a JavaScript object by parsing a JSON string.

Example

<!DOCTYPE html>

<html>

<body>

<h2>Creating an Object Parsing JSON</h2>

<p id=”demo”></p>

<script>

const myJSON = ‘{“name”:”John”, “age”:30, “car”:null}’;

const myObj = JSON.parse(myJSON);

document.getElementById(“demo”).innerHTML = myObj.name;

</script>

</body>

</html>

Output

Creating an Object Parsing JSON

John

Accessing Object Values

Access the object values by using dot (.) notation:

Example

<!DOCTYPE html>

<html>

<body>

<h2>Access a JavaScript Object</h2>

<p id=”demo”></p>

<script>

const myJSON = ‘{“name”:”John”, “age”:30, “car”:null}’;

const myObj = JSON.parse(myJSON);

document.getElementById(“demo”).innerHTML = myObj.name;

</script>

</body>

</html>

Output

Access a JavaScript Object

John

Accessing the object values by using bracket ([]) notation.

Example

<!DOCTYPE html>

<html>

<body>

<h2>Access a JavaScript Object</h2>

<p id=”demo”></p>

<script>

const myJSON = ‘{“name”:”John”, “age”:30, “car”:null}’;

const myObj = JSON.parse(myJSON);

document.getElementById(“demo”).innerHTML = myObj[“name”];

</script>

</body>

</html>

Output

Access a JavaScript Object

John

Looping an Object

Loop through object properties with a for-in loop.

Example

<!DOCTYPE html>

<html>

<body>

<h2>Looping Object Properties</h2>

<p id=”demo”></p>

<script>

const myJSON = ‘{“name”:”John”, “age”:30, “car”:null}’;

const myObj = JSON.parse(myJSON);

let text = “”;

for (const x in myObj) {

  text += x + “, “;

}

document.getElementById(“demo”).innerHTML = text;

</script>

</body>

</html>

Output

Looping Object Properties

name, age, car,

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

Example

<!DOCTYPE html>

<html>

<body>

<h2>Looping JavaScript Object Values</h2>

<p id=”demo”></p>

<script>

const myJSON = ‘{“name”:”John”, “age”:30, “car”:null}’;

const myObj = JSON.parse(myJSON);

let text = “”;

for (const x in myObj) {

  text += myObj[x] + “, “;

}

document.getElementById(“demo”).innerHTML = text;

</script>

</body>

</html>

Output

Looping JavaScript Object Values

John, 30, null,