Matrices JSON

Tabla de contenido

Esta es una cadena JSON:

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

Dentro de la cadena JSON hay un literal de matriz JSON:

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

Las matrices en JSON son casi iguales a las matrices en JavaScript.

En JSON, los valores de la matriz deben ser de tipo cadena, número, objeto, matriz, booleano. o nulo.

En JavaScript, los valores de una matriz pueden ser todos los anteriores, más cualquier otro valor válido. Expresión de JavaScript, incluidas funciones, fechas y indefinido.

Matrices de JavaScript

Puede crear una matriz de JavaScript a partir de un literal

Ejemplo

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

Pruébelo usted mismo →

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

Puede crear una matriz de JavaScript analizando una cadena JSON

Ejemplo

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

Pruébelo usted mismo →

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

Accediendo a los valores de la matriz

Accede a los valores de la matriz por índice:

Ejemplo

myArray[0];

Pruébelo usted mismo →

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

Matrices en objetos

Los objetos pueden contener matrices:

Ejemplo

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

Accede a los valores de la matriz por índice:

Ejemplo

myObj.cars[0];

Pruébelo usted mismo →

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

Recorriendo una matriz

Puede acceder a los valores de la matriz utilizando un bucle for in:

Ejemplo

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

Pruébelo usted mismo →

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

O puedes usar un bucle for:

Ejemplo

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

Pruébelo usted mismo →

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