JSON Arrays

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 Arrays

This is a JSON string:

‘[“Ford”, “BMW”, “Fiat”]’

Inside the JSON string there is a JSON array literal:

[“Ford”, “BMW”, “Fiat”]

Arrays in JSON are similar to arrays in JavaScript.

In JSON, array values should be of type string, number, object, array, boolean or null.

In JavaScript, array values can be all of the above, plus any other valid JavaScript expression, including functions, dates, and undefined.

JavaScript Arrays

To create a JavaScript array from a literal:

Example

<!DOCTYPE html>

<html>

<body>

<h2>Creating an Array from a Literal</h2>

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

<script>

const myArray = [“Ford”, “BMW”, “Fiat”];

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

</script>

</body>

</html>

Output

Creating an Array from a Literal

Ford,BMW,Fiat

To create a JavaScript array by parsing a JSON string.

Example

<!DOCTYPE html>

<html>

<body>

<h2>Creating an Array from JSON</h2>

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

<script>

const myJSON = ‘[“Ford”, “BMW”, “Fiat”]’;

const myArray = JSON.parse(myJSON);

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

</script>

</body>

</html>

Output

Creating an Array from JSON

Ford,BMW,Fiat

Accessing Array Values

Access array values using an index.

Example

<!DOCTYPE html>

<html>

<body>

<h1>Access an Array by Index</h1>

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

<script>

const myJSON = ‘[“Ford”, “BMW”, “Fiat”]’;

const myArray = JSON.parse(myJSON);

document.getElementById(“demo”).innerHTML = myArray[0];

</script>

</body>

</html>

Output

Access an Array by Index

ford

Arrays in Objects

Objects consist of arrays:

{

“name”:”John”,

“age”:30,

“cars”:[“Ford”, “BMW”, “Fiat”]

}

You access array values by index:

Example

<!DOCTYPE html>

<html>

<body>

<h2>Access Array Values</h2>

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

<script>

const myJSON = ‘{“name”:”John”, “age”:30, “cars”:[“Ford”, “BMW”, “Fiat”]}’;

const myObj = JSON.parse(myJSON);

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

</script>

</body>

</html>

Output

Access Array Values

Ford

Looping Through an Array

To access array values by using a for-in loop.

Example

<!DOCTYPE html>

<html>

<body>

<h2>Looping an Array</h2>

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

<script>

const myJSON = ‘{“name”:”John”, “age”:30, “cars”:[“Ford”, “BMW”, “Fiat”]}’;

const myObj = JSON.parse(myJSON);

let text = “”;

for (let i in myObj.cars) {

  text += myObj.cars[i] + “, “;

}

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

</script>

</body>

</html>

Output

Looping an Array

Ford, BMW, Fiat,

Or use a for loop.

Example

<!DOCTYPE html>

<html>

<body>

<h2>Looping an Array</h2>

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

<script>

const myJSON = ‘{“name”:”John”, “age”:30, “cars”:[“Ford”, “BMW”, “Fiat”]}’;

const myObj = JSON.parse(myJSON);

let text = “”;

for (let i = 0; i < myObj.cars.length; i++) {

  text += myObj.cars[i] + “, “;

}

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

</script>

</body>

</html>

Output

Looping an Array

Ford, BMW, Fiat,