JSON.parse()

O uso comum do JSON é a transmissão de dados entre o servidor web e o cliente.

ao receber dados do servidor web, os dados sempre são strings.

através JSON.parse() Analise os dados, que se tornarão objetos JavaScript.

Exemplo - Análise de JSON

Imaginemos que recebemos este texto do servidor web:

'{ "name":"Bill Gates", "age":62, "city":"Seattle"}'

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

var obj = JSON.parse('{ "name":"Bill Gates", "age":62, "city":"Seattle"}');

Certifique-se de que este texto esteja escrito em formato JSON, senão haverá erro de sintaxe.

Use um objeto JavaScript em sua página:

Exemplo

<p id="demo"></p> 
<script>
 document.getElementById("demo").innerHTML = obj.name + ", " + obj.age; 
</script>

Experimente você mesmo

JSON vindo do servidor

Você pode fazer uma solicitação AJAX para solicitar JSON do servidor.

Se a resposta do servidor for escrita em formato JSON, você pode analisar a string em um objeto JavaScript.

Exemplo

Use XMLHttpRequest para obter dados do servidor:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()  {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();

Experimente você mesmo

veja json_demo.txt

como uma matriz de JSON

ao usar JSON derivado de uma matriz JSON.parse() Depois, este método retornará uma matriz JavaScript, não um objeto JavaScript.

Exemplo

O JSON retornado do servidor é uma matriz:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()  {
    if (this.readyState == 4 && this.status == 200) {
        myArr =  JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML  = myArr[0];
    }
};
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();

Experimente você mesmo

Ver json_demo_array.txt

Exceção

Analisar data

Não são permitidos objetos de data no JSON.

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

Depois disso, você pode convertê-lo de volta para um objeto de data:

Exemplo

Converter uma string para data:

var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "cidade":"Seattle"}
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Experimente você mesmo

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

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

Exemplo

Converter uma string para data, usando a função reviver:

var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var 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

Analisar função

Não são permitidas funções no JSON.

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

Mais tarde, você pode convertê-lo de volta para uma função:

Exemplo

Converter uma string para função:

var text = '{ "name":"Bill Gates", "age":"function () {return 62;}", "cidade":"Seattle"}
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " +  obj.age();

Experimente você mesmo

Você deve evitar usar funções no JSON, pois elas perdem seu escopo e você também precisa usar eval() Transformá-los em funções.

Suporte do Navegador

Todos os navegadores populares e os padrões mais recentes do ECMAScript (JavaScript) incluem JSON.parse() Função:

Os números na tabela a seguir especificam o suporte completo JSON.parse() Versão inicial do navegador da função:

Sim 8.0 3.5 4.0 10.0

Para navegadores mais antigos, as bibliotecas JavaScript disponíveis nas seguintes URLs são:

https://github.com/douglascrockford/JSON-js