Las arrays JSON son similares a las arrays JavaScript.
Sintaxis de arrays en objetos JSON:
// JSON Arrays Syntax
{
"name":"Peter parker",
"heroName": "Spiderman",
"friends" : ["Deadpool", "Hulk", "Wolverine"]
}
Acceder a los valores de la array:
se puede acceder a los valores de la array utilizando el índice de cada elemento de una array.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p id="paraId"></p>
<script>
var spidermanDetail = {
"name": "Peter parker",
"heroName": "Spiderman",
"friends": ["Deadpool", "Hulk", "Wolverine"]
};
var x = spidermanDetail.friends[0];
document.getElementById("paraId").innerHTML = x;
</script>
</body>
</html>
Producción:
Deadpool
Recorriendo un Array:
El bucle for-in se puede usar para iterar a través de Array.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p id="paraId"></p>
<script>
var str = "";
var spidermanDetail = {
"name": "Peter parker",
"heroName": "Spiderman",
"friends": ["Deadpool", "Hulk", "Wolverine"]
};
for (i in spidermanDetail.friends) {
str += spidermanDetail.friends[i] + "<br/>";
}
document.getElementById("paraId").innerHTML = str;
</script>
</body>
</html>
Producción:
Deadpool Hulk Wolverine
Modificación de los valores de una array:
se puede utilizar un número de índice para la modificación de valores.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p id="paraId"></p>
<script>
var str = "";
var spidermanDetail = {
"name": "Peter parker",
"heroName": "Spiderman",
"friends": ["Deadpool", "Hulk", "Wolverine"]
};
spidermanDetail.friends[1] = "Iron Man";
for (i in spidermanDetail.friends) {
str += spidermanDetail.friends[i] + "<br/>";
}
document.getElementById("paraId").innerHTML = str;
</script>
</body>
</html>
Producción:
Deadpool Iron Man Wolverine
Eliminación de valores de array:
los valores de una array se pueden eliminar mediante la palabra clave delete.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p id="paraId"></p>
<script>
var str = "";
var spidermanDetail = {
"name": "Peter parker",
"heroName": "Spiderman",
"friends": ["Deadpool", "Hulk", "Wolverine"]
};
delete spidermanDetail.friends[2];
for (i in spidermanDetail.friends) {
str += spidermanDetail.friends[i] + "<br/>";
}
document.getElementById("paraId").innerHTML = str;
</script>
</body>
</html>
Producción:
Deadpool Hulk
Arrays anidadas en objetos JSON:
en la array anidada, otra array también puede ser un valor de una array.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p id="paraId"></p>
<script>
var str = "";
var spidermanDetail = {
"name": "Peter parker",
"heroName": "Spiderman",
"friends": [{
"heroName": "Deadpool",
"skills": ["Martial artist", "Assassin"]
}, {
"heroName": "Hulk",
"skills": ["Superhuman Speed", "Superhuman Strength"]
}, {
"heroName": "Wolverine",
"skills": ["Retractable bone claws", "Superhuman senses"]
}]
};
for (i in spidermanDetail.friends) {
str += "<h3>" + spidermanDetail.friends[i].heroName + "</h3>";
for (j in spidermanDetail.friends[i].skills) {
str += spidermanDetail.friends[i].skills[j] + "<br/>";
}
}
document.getElementById("paraId").innerHTML = str;
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por letsLearnCode y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA