Literales JSON


Tabla de contenido

    Mostrar tabla de contenidos


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:

  • cadena
  • número
  • objeto
  • matriz
  • booleano
  • nulo

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.


Objetos JavaScript

Puede crear un objeto JavaScript a partir de un literal de objeto JSON:

Ejemplo

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:

Ejemplo

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>

Acceder a los valores de los objetos

Puede acceder a los valores de los objetos utilizando la notación de puntos (.):

Ejemplo

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 ([]):

Ejemplo

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>


Colocar un objeto en bucle

Puede recorrer las propiedades del objeto con un bucle for-in:

Ejemplo

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:

Ejemplo

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>