Matrizes JSON

Índice

Esta é uma string JSON:

'["Ford", "BMW", "Fiat"]'

Dentro da string JSON há um literal de array JSON:

["Ford", "BMW", "Fiat"]

Arrays em JSON são quase iguais aos arrays em JavaScript.

Em JSON, os valores do array devem ser do tipo string, número, objeto, array, booleano ou nulo.

Em JavaScript, os valores do array podem ser todos os itens acima, além de qualquer outro valor válido Expressão JavaScript, incluindo funções, datas e indefinido.

Matrizes JavaScript

Você pode criar um array JavaScript a partir de um literal

Exemplo

myArray = ["Ford", "BMW", "Fiat"];

Experimente você mesmo →

<!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>

Você pode criar um array JavaScript analisando uma string JSON

Exemplo

myJSON = '["Ford", "BMW", "Fiat"]';
myArray = JSON.parse(myJSON);

Experimente você mesmo →

<!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>

Acessando valores de array

Você acessa valores de array por índice:

Exemplo

myArray[0];

Experimente você mesmo →

<!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>

Matrizes em objetos

Os objetos podem conter matrizes:

Exemplo

{
"name":"John",
"age":30,
"cars":["Ford", "BMW", "Fiat"]
}

Você acessa valores de array por índice:

Exemplo

myObj.cars[0];

Experimente você mesmo →

<!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>

Loop através de um array

Você pode acessar valores de array usando um loop for in:

Exemplo

for (let i in myObj.cars) {
  
  x 
  += myObj.cars[i];
}

Experimente você mesmo →

<!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>

Ou você pode usar um loop for:

Exemplo

 for (let i 
  = 0; i < myObj.cars.length; i++) {
  x 
  += myObj.cars[i];
}

Experimente você mesmo →

<!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>