Esta es una cadena JSON:
'{"name":"John", "age":30, "car":null}'
Dentro de la cadena JSON hay un literal de objeto JSON:
{"name":"John", "age":30, "car":null}
Los literales de objetos JSON están rodeados por llaves {}.
Los literales de objetos JSON contienen pares clave/valor.
Las claves y los valores están separados por dos puntos.
Las claves deben ser cadenas, y los valores deben ser un tipo de datos JSON válido:
Cada par clave/valor está separado por una coma.
Es un error común llamar literal a un objeto JSON "un objeto JSON".
JSON no puede ser un objeto. JSON es un formato de cadena.
Los datos son solo JSON cuando están en formato de cadena. Cuando se convierte en una variable de JavaScript, se convierte en un objeto de JavaScript.
Puede crear un objeto JavaScript a partir de un literal de objeto JSON:
myObj = {"name":"John", "age":30, "car":null};
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>Creating an Object from a JSON Literal</h2>
<p id="demo"></p>
<script>
const myObj = {"name":"John", "age":30, "car":null};
document.getElementById("demo").innerHTML = myObj.name;
</script>
</body>
</html>
Normalmente, crea un objeto JavaScript analizando una cadena JSON:
myJSON = '{"name":"John", "age":30, "car":null}';
myObj = JSON.parse(myJSON);
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>Creating an Object Parsing JSON</h2>
<p id="demo"></p>
<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>
</body>
</html>
Puede acceder a los valores de los objetos utilizando la notación de puntos (.):
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
x = myObj.name;
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>Access a JavaScript Object</h2>
<p id="demo"></p>
<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>
</body>
</html>
También puede acceder a los valores de los objetos utilizando la notación entre corchetes ([]):
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
x = myObj["name"];
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>Access a JavaScript Object</h2>
<p id="demo"></p>
<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj["name"];
</script>
</body>
</html>
Puede recorrer las propiedades del objeto con un bucle for-in:
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
let text = "";
for (const x in myObj) {
text += x + ", ";
}
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>Looping Object Properties</h2>
<p id="demo"></p>
<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
let text = "";
for (const x in myObj) {
text += x + ", ";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
En un bucle for-in, utilice la notación entre corchetes para acceder a la propiedad valores:
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
let text = "";
for (const x in myObj) {
text += myObj[x] + ", ";
}
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>Looping JavaScript Object Values</h2>
<p id="demo"></p>
<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
let text = "";
for (const x in myObj) {
text += myObj[x] + ", ";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>