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,