Literais JSON

Índice

    Mostrar índice

Esta é uma string JSON:

'{"name":"John", "age":30, "car":null}'

Dentro da string JSON há um objeto JSON literal:

{"name":"John", "age":30, "car":null}

Literais de objeto JSON são cercados por chaves {}.

Literais de objeto JSON contêm pares chave/valor.

Chaves e valores são separados por dois pontos.

As chaves devem ser strings, e os valores devem ser um tipo de dados JSON válido:

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

Cada par chave/valor é separado por uma vírgula.

É um erro comum chamar um objeto JSON literal de "um objeto JSON".

JSON não pode ser um objeto. JSON é um formato de string.

Os dados são JSON apenas quando estão em formato de string. Quando é convertido em uma variável JavaScript, torna-se um objeto JavaScript.

Objetos JavaScript

Você pode criar um objeto JavaScript a partir de um objeto JSON literal:

Exemplo

myObj = {"name":"John", "age":30, "car":null};

Experimente você mesmo →

<!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, você cria um objeto JavaScript analisando uma string JSON:

Exemplo

myJSON = '{"name":"John", "age":30, "car":null}';
myObj = JSON.parse(myJSON);

Experimente você mesmo →

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

Acessando valores de objetos

Você pode acessar valores de objetos usando a notação de ponto (.):

Exemplo

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
  x = myObj.name;

Experimente você mesmo →

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

Você também pode acessar valores de objetos usando a notação de colchetes ([]):

Exemplo

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
  x = myObj["name"];

Experimente você mesmo →

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

Loop de um objeto

Você pode percorrer as propriedades do objeto com um loop for-in:

Exemplo

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);

let text = "";
for (const x in myObj) {
  text += x + ", ";
}

Experimente você mesmo →

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

Em um loop for-in, use a notação de colchetes para acessar os valores da propriedade:

Exemplo

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);

let text = "";
for (const x in myObj) {
  text += myObj[x] + ", ";
}

Experimente você mesmo →

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