JSON Array es casi lo mismo que JavaScript Array . La array JSON puede almacenar valores de tipo string, array, booleano, número, objeto o nulo. En la array JSON, los valores están separados por comas. Se puede acceder a los elementos del arreglo usando el operador [].
JSON Array es de diferentes tipos. Vamos a entenderlos con la ayuda de ejemplos.
JSON Array of String: JSON array of Strings contiene solo elementos de string. Por ejemplo, la siguiente array tiene 6 elementos de string, «Ram», «Shyam», «Radhika», «Akshay», «Prashant» y «Varun», cada elemento está separado por una coma (,).
["Ram", "Shyam", "Radhika", "Akshay", "Prashant", "Varun"]
Ejemplo: aquí asignaremos una array de strings JSON a los estudiantes clave en el objeto jsonStringArray . Luego accedemos al primer elemento del arreglo usando el operador [ ].
HTML
<!DOCTYPE html>
<html>
<body>
<p id="para"></p>
<script>
var jsonStringArray = {
// Assigned a JSON array of strings
// to the key "students".
"students": ["Ram", "Shyam", "Radhika",
"Akshay", "Prashant", "Varun"],
};
// It returned an array. Then we accessed
// the first index of the array
// (which is "Ram") using [] syntax.
var x = jsonStringArray.students[0];
// Set the inner HTML of "para" paragraph
// to the value of variable "x".
document.getElementById("para").innerHTML = x;
</script>
</body>
</html>
Producción:
Ram
Array JSON de números: la array JSON de números contiene solo elementos numéricos. Por ejemplo, la siguiente array tiene 5 elementos, 23, 44, 76, 34, 98.
[23, 44, 76, 34, 98]
Ejemplo: aquí asignamos una array de números JSON a las marcas clave en el objeto jsonNumberArray . Luego accedemos al primer elemento de la array usando el operador [].
HTML
<!DOCTYPE html>
<html>
<body>
<p id="para"></p>
<script>
var jsonNumberArray = {
// Assigned a JSON array of numbers
// to the key "marks".
"marks": [23, 44, 76, 34, 98],
};
// It returned an number array.
// Then we accessed the first
// index of the array
// (which is 23) using [] syntax.
var x = jsonNumberArray.marks[0];
// Set the inner HTML of "para" paragraph
// to the value of variable "x".
document.getElementById("para").innerHTML = x;
</script>
</body>
</html>
Producción:
23
Array JSON de valores booleanos: la array JSON de valores booleanos contiene solo elementos booleanos (ya sea verdadero o falso). Por ejemplo, la siguiente array tiene 5 elementos, cada uno de los cuales es verdadero o falso.
[true, true, true, false, false, true]
Ejemplo: aquí asignamos una array JSON de booleanos a la clave booleana en el objeto jsonBooleanArray . Luego accedemos al primer elemento de la array usando el operador [].
HTML
<!DOCTYPE html>
<html>
<body>
<p id="para"></p>
<script>
var jsonBooleanArray = {
// Assigned a JSON array of boolean
// to the key "booleans".
"booleans": [true, true, true, false, false, true],
};
// Here we accessed the booleans property
// of jsonBooleanArray Object.
// It returned an boolean array. Then we accessed the
// first index of the array
// (which is true) using [] syntax.
var x = jsonBooleanArray.booleans[0];
// Set the inner HTML of "para" paragraph
// to the value of variable "x".
document.getElementById("para").innerHTML = x;
</script>
</body>
</html>
Producción:
true
Array de objetos JSON: un objeto JSON es lo mismo que un objeto JavaScript. También podemos crear una array JSON que contenga muchos objetos JSON, luego podemos iterar sobre esa array o usar [] para obtener el objeto que necesitamos. En el siguiente ejemplo, hay tres objetos JSON en la array asignada a «libros» clave. Cada objeto tiene la propiedad «nombre» y «autor».
{
"books":[
{"name":"Let Us C", "author":"Yashavant Kanetkar"},
{"name":"Rich Dad Poor Dad", "author":"Robert Kiyosaki "},
{"name":"Introduction to Algorithms", "author":"Cormen"},
]
}
Ejemplo: aquí asignamos una array de objetos JSON a los libros clave en el objeto jsonObjectArray . Luego accedemos al primer elemento de la array usando el operador [].
HTML
<!DOCTYPE html>
<html>
<body>
<p id="para"></p>
<script>
var jsonObjectArray = {
// Assigned a JSON array of objects
// to the key "books"
"books": [
{
"name": "Let Us C",
"author": "Yashavant Kanetkar"
},
{
"name": "Rich Dad Poor Dad",
"author": "Robert Kiyosaki "
},
{
"name": "Introduction to Algorithms",
"author": "Cormen"
},
]
};
// Here we accessed the books property of
// jsonObjectArray Object.
// It returned an object array. Then we
// accessed the first index of the array
// (which is an JSON object) using [] syntax
var x = jsonObjectArray.books[0];
// Set the inner HTML of "para" paragraph
// to the value of variable "x".
document.getElementById("para").innerHTML
= x.name + " by " + x.author;
</script>
</body>
</html>
Producción:
Let Us C by Yashavant Kanetkar
5. JSON Array of Arrays O JSON Multidimensional Array: También es posible crear una array JSON que contenga otras arrays como elementos en ella. En el siguiente ejemplo, tenemos una array JSON que contiene arrays [“a”, “b”, “c”] , [“d”, “e”, “f”] , [“g”, “h”, “ yo”] en él. Podemos usar el operador [ ] para obtener la array en cualquier índice y usar el operador [ ] nuevamente para obtener el elemento de la array seleccionada.
{
"matrix": [
[ "a", "b", "c" ],
[ "d", "e", "f" ],
[ "g", "h", "i" ]
],
};
Ejemplo: Aquí asignamos un JSON Array of Arrays a la array clave en el objeto jsonMultiArray . Luego accedemos al primer elemento de la array usando el operador [].
HTML
<!DOCTYPE html>
<html>
<body>
<p id="para"></p>
<script>
var jsonMultiArray = {
// Assigned a JSON array of
// Arrays to the key "matrix".
"matrix": [
["a", "b", "c"],
["d", "e", "f"],
["g", "h", "i"]
],
};
// Here we accessed the matrix property
// of jsonMultiArray Object.
// It returned an matrix(2D array). Then we
// accessed the first element of
// the first index of matrix using [] syntax.
var x = jsonMultiArray.matrix[0][0];
// Set the inner HTML of "para" paragraph
// to the value of variable "x".
document.getElementById("para").innerHTML = x;
</script>
</body>
</html>
Producción:
a