Javascript como analisar a matriz JSON

92

Estou usando o Sencha Touch (ExtJS) para obter uma mensagem JSON do servidor. A mensagem que recebo é esta:

{
"success": true,
"counters": [
    {
        "counter_name": "dsd",
        "counter_type": "sds",
        "counter_unit": "sds"
    },
    {
        "counter_name": "gdg",
        "counter_type": "dfd",
        "counter_unit": "ds"
    },
    {
        "counter_name": "sdsData",
        "counter_type": "sds",
        "counter_unit": "   dd       "
    },
    {
        "counter_name": "Stoc final",
        "counter_type": "number    ",
        "counter_unit": "litri     "
    },
    {
        "counter_name": "Consum GPL",
        "counter_type": "number    ",
        "counter_unit": "litri     "
    },
    {
        "counter_name": "sdg",
        "counter_type": "dfg",
        "counter_unit": "gfgd"
    },
    {
        "counter_name": "dfgd",
        "counter_type": "fgf",
        "counter_unit": "liggtggggri     "
    },
    {
        "counter_name": "fgd",
        "counter_type": "dfg",
        "counter_unit": "kwfgf       "
    },
    {
        "counter_name": "dfg",
        "counter_type": "dfg",
        "counter_unit": "dg"
    },
    {
        "counter_name": "gd",
        "counter_type": "dfg",
        "counter_unit": "dfg"
    }

    ]
}

Meu problema é que não consigo analisar esse objeto JSON para poder usar cada um dos objetos de contador.

Estou tentando conseguir isso assim:

var jsonData = Ext.util.JSON.decode(myMessage);
for (var counter in jsonData.counters) {
     console.log(counter.counter_name);
 }

O que estou fazendo de errado ? Obrigado!

maefisto
fonte

Respostas:

140

Javascript tem uma análise JSON embutida para strings, que eu acho que é o que você tem:

var myObject = JSON.parse("my json string");

usar isso com seu exemplo seria:

var jsonData = JSON.parse(myMessage);
for (var i = 0; i < jsonData.counters.length; i++) {
    var counter = jsonData.counters[i];
    console.log(counter.counter_name);
}

Aqui está um exemplo prático

EDIT : Há um erro no uso do loop for (perdi isso na minha primeira leitura, crédito de @Evert pela mancha). usar um loop for-in definirá var como o nome da propriedade do loop atual, não os dados reais. Veja meu loop atualizado acima para o uso correto

IMPORTANTE : o JSON.parsemétodo não funcionará em navegadores antigos - portanto, se você planeja disponibilizar seu site por meio de algum tipo de conexão de internet que flexiona o tempo, isso pode ser um problema! Se você realmente estiver interessado, aqui está um gráfico de suporte (que marca todas as minhas caixas).

musefan
fonte
1
Se ele usar uma biblioteca que suporte uma função parseJSON entre navegadores, ele deve usá-la. Além disso, você repete o erro de loop.
Bergi,
Recebo um erro na primeira linha quando executo este: Uncaught SyntaxError: Token inesperado o
noites
@noites: É mais provável que você tenha uma string JSON inválida, então, tente uma ferramenta de validação JSON online, como esta
musefan
8

Esta é a minha resposta,

<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p>
First Name: <span id="fname"></span><br> 
Last Name: <span id="lname"></span><br> 
</p> 
<script>
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

//var jsonData = eval ("(" + txt + ")");
var jsonData = JSON.parse(txt);
for (var i = 0; i < jsonData.employees.length; i++) {
    var counter = jsonData.employees[i];
    //console.log(counter.counter_name);
    alert(counter.firstName);
}

</script>
</body>
</html>
Homem pescador
fonte
6

Em um for-in-loop, a variável running contém o nome da propriedade, não o valor da propriedade.

for (var counter in jsonData.counters) {
    console.log(jsonData.counters[counter].counter_name);
}

Mas, como contadores é um Array, você deve usar um loop for normal:

for (var i=0; i<jsonData.counters.length; i++) {
    var counter = jsonData.counters[i];
    console.log(counter.counter_name);
}
Bergi
fonte
1

A "maneira Sencha" para interagir com os dados do servidor é configurar um Ext.data.Storeproxy por um Ext.data.proxy.Proxy(neste caso Ext.data.proxy.Ajax) fornecido com um Ext.data.reader.Json(para dados codificados em JSON, existem outros leitores disponíveis também). Para gravar dados de volta no servidor, existem Ext.data.writer.Writervários tipos de programas.

Aqui está um exemplo de configuração como esta:

    var store = Ext.create('Ext.data.Store', {
        fields: [
            'counter_name',
            'counter_type',
            'counter_unit'
        ],

        proxy: {
            type: 'ajax',
            url: 'data1.json',

            reader: {
                type: 'json',
                idProperty: 'counter_name',
                rootProperty: 'counters'
            }
        }
    });

data1.jsonneste exemplo (também disponível neste fiddle ) contém seus dados literalmente. idProperty: 'counter_name'é provavelmente opcional neste caso, mas geralmente aponta para o atributo de chave primária. rootProperty: 'counters'especifica qual propriedade contém uma matriz de itens de dados.

Com a configuração de uma loja, você pode reler os dados do servidor ligando para store.load(). Você também pode conectar a loja a qualquer componente de IU apropriado do Sencha Touch, como grades, listas ou formulários.

Rzen
fonte
0

Isso funciona como um encanto!

Então, editei o código de acordo com minha exigência. E aqui estão as alterações: Isso salvará o número de id da resposta na variável de ambiente.

var jsonData = JSON.parse(responseBody);
for (var i = 0; i < jsonData.data.length; i++)
{
    var counter = jsonData.data[i];
    postman.setEnvironmentVariable("schID", counter.id);
}
Sobhit Sharma
fonte
0

A resposta com o voto mais alto contém um erro. quando usei, descobri na linha 3:

var counter = jsonData.counters[i];

Eu mudei para:

var counter = jsonData[i].counters;

e funcionou para mim. Há uma diferença para as outras respostas na linha 3:

var jsonData = JSON.parse(myMessage);
for (var i = 0; i < jsonData.counters.length; i++) {
    var counter = jsonData[i].counters;
    console.log(counter.counter_name);
}
Mahdi Jalali
fonte
1
Talvez você queira dizer pode onde disse que deveria . No entanto, é melhor se você adicionar mais detalhes / explicações ao seu código, que ajudarão melhor o OP e outras pessoas que tenham a mesma dúvida.
Tiw
Você também pode explicar um pouco por que escolheu esse método para que o usuário aprenda um pouco mais. Isso ajudaria a melhorar esta resposta.
TsTeaTime
a resposta com mais votos respondeu a esta pergunta, mas quando a uso, entendi que está errado na linha 4: var counter = jsonData.counters [i]; Mas eu mudo para: var counter = jsonData [i] .counters; e funcionou. então eu disse pode em vez de deveria.
Mahdi Jalali
0

Só para alertar ...

var data = JSON.parse(responseBody);

foi descontinuado .

Postman Learning Center agora sugere

var jsonData = pm.response.json();
Desenhou
fonte
-1

Você deve usar um armazenamento de dados e proxy em ExtJs. Existem muitos exemplos disso, e o leitor JSON analisa automaticamente a mensagem JSON no modelo que você especificou.

Não há necessidade de usar Javascript básico ao usar ExtJs, tudo é diferente, você deve usar as formas de ExtJs para fazer tudo certo. Leia a documentação com atenção, é bom.

A propósito, esses exemplos também valem para o Sencha Touch (especialmente v2), que é baseado nas mesmas funções principais dos ExtJs.

Geerten
fonte
-1

Não tenho certeza se meus dados correspondem exatamente, mas eu tinha uma matriz de matrizes de objetos JSON, que foram exportados do jQuery FormBuilder ao usar páginas.

Espero que minha resposta possa ajudar qualquer pessoa que tropeçar nesta pergunta procurando uma resposta para um problema semelhante ao que eu tive.

Os dados eram mais ou menos assim:

var allData = 
[
    [
        {
            "type":"text",
            "label":"Text Field"
        }, 
        {
            "type":"text",
            "label":"Text Field"
        }
    ],
    [
        {
            "type":"text",
            "label":"Text Field"
        }, 
        {
            "type":"text",
            "label":"Text Field"
        }
    ]
]

O que fiz para analisar isso foi simplesmente fazer o seguinte:

JSON.parse("["+allData.toString()+"]")
James Wolfe
fonte