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,