JSON.parse()

Índice

    Mostrar índice

Um uso comum do JSON é trocar dados de/para um servidor web.

Ao receber dados de um servidor web, os dados são sempre uma string.

Analise os dados com JSON.parse() e os dados se tornarão um objeto JavaScript.

Exemplo - Análise de JSON

Imagine que recebemos este texto de um servidor web:

'{"name":"John", "age":30, "city":"New York"}'

Use a função JavaScript JSON.parse() para converter texto em um objeto JavaScript:

const obj = JSON.parse('{"name":"John", "age":30, "city":"New 
  York"}');

Certifique-se de que o texto esteja no formato JSON, caso contrário você receberá um erro de sintaxe.

Use o objeto JavaScript em sua página:

Exemplo

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = obj.name;
</script>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Creating an Object from a JSON String</h2>

<p id="demo"></p>

<script>
const txt = '{"name":"John", "age":30, "city":"New York"}'
const obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>

</body>
</html>

Matriz como JSON

Ao usar o JSON.parse() em um JSON derivado de um array, o método irá retornar um array JavaScript, em vez de um objeto JavaScript.

Exemplo

const text = '["Ford", "BMW", "Audi", "Fiat"]';
const myArr = JSON.parse(text);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Parsing a JSON Array.</h2>
<p>Data written as an JSON array will be parsed into a JavaScript array.</p>
<p id="demo"></p>

<script>
const text = '[ "Ford", "BMW", "Audi", "Fiat" ]';
const myArr = JSON.parse(text);
document.getElementById("demo").innerHTML = myArr[0];
</script>

</body>
</html>

Exceções

Analisando Datas

Objetos de data não são permitidos em JSON.

Se precisar incluir uma data, escreva-a como uma string.

Você pode convertê-lo novamente em um objeto de data posteriormente:

Exemplo

Converta uma string em uma data:

const text =
  '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
  const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
  
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a date object.</h2>
<p id="demo"></p>

<script>
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

</body>
</html>

Ou você pode usar o segundo parâmetro, da função JSON.parse(), chamado reviver.

O parâmetro reviver é uma função que verifica cada propriedade, antes de retornar o valor.

Exemplo

Converta uma string em uma data, usando a função reviver:

const text =
  '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
  const obj = JSON.parse(text, function (key, value) {
  if 
  (key == "birth") {
    return new 
  Date(value);
  } else {
    
  return value;
  }
});
  
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a date object.</h2>

<p id="demo"></p>

<script>
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

</body>
</html>

Funções de análise

Funções não são permitidas em JSON.

Se você precisar incluir uma função, escreva-a como uma string.

Você pode convertê-lo novamente em uma função mais tarde:

Exemplo

Converta uma string em uma função:

const text =
  '{"name":"John", "age":"function () {return 
  30;}", "city":"New York"}';
  const obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
  
document.getElementById("demo").innerHTML = obj.name + ", " + 
  obj.age();

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a function.</h2>
<p id="demo"></p>

<script>
const text = '{"name":"John", "age":"function() {return 30;}", "city":"New York"}';
const obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age(); 
</script>

</body>
</html>

Você deve evitar usar funções em JSON, as funções perderão seu escopo, e você teria que usar eval() para convertê-los novamente em funções.