loop jQuery sobre resultado JSON do sucesso do AJAX?


152

No retorno de chamada de sucesso do jQuery AJAX, quero fazer um loop sobre os resultados do objeto. Este é um exemplo de como a resposta aparece no Firebug.

[
 {"TEST1":45,"TEST2":23,"TEST3":"DATA1"},
 {"TEST1":46,"TEST2":24,"TEST3":"DATA2"},
 {"TEST1":47,"TEST2":25,"TEST3":"DATA3"}
]

Como posso percorrer os resultados para ter acesso a cada um dos elementos? Eu tentei algo como abaixo, mas isso não parece estar funcionando.

jQuery.each(data, function(index, itemData) {
  // itemData.TEST1
  // itemData.TEST2
  // itemData.TEST3
});

1
Isso deve funcionar. Você tem certeza de que é exatamente o mesmo código e os mesmos dados?
Tamas Czinege 9/04/09

Respostas:


255

você pode remover o loop externo e substituir this por data.data:

$.each(data.data, function(k, v) {
    /// do stuff
});

Você estava perto:

$.each(data, function() {
  $.each(this, function(k, v) {
    /// do stuff
  });
});

Você tem uma matriz de objetos / mapas para que o loop externo itere sobre eles. O loop interno itera sobre as propriedades em cada elemento do objeto.


O primeiro loop é para uma "categoria", enquanto um loop dentro é para um "atributo". De que outra forma isso é feito?
dcolumbus

E se você quiser trabalhar com o elemento de objeto em vez de suas propriedades? Por que o loop de @ aherrick na pergunta não funciona?
StuperUser

1
Se esse loop for usado em uma função separada, use em $(data)vez de data, caso contrário, a variável ksempre retornará 0. #
user1226868

2
Alguém poderia explicar as variáveis ​​k & v que são passadas para a segunda função?
Brent Connor

@BrentConnor, neste caso, k & v representam a chave e o valor da matriz que está sendo percorrida. Leia a função jquery .each ()
Ghost Echo

80

Você também pode usar a função getJSON :

    $.getJSON('/your/script.php', function(data) {
        $.each(data, function(index) {
            alert(data[index].TEST1);
            alert(data[index].TEST2);
        });
    });

Esta é realmente apenas uma reformulação da resposta de ifesdjeen, mas achei que poderia ser útil para as pessoas.


Isso ajudou. Por alguma razão, não consegui que a resposta do @cletus funcionasse, mas isso funcionou. Não sei qual é o grande mistério sobre o jQuery, mas o código simples nem sempre funciona como você espera.
AturSams

38

Se você usa o Fire Fox, basta abrir um console (use a tecla F12) e tente o seguinte:

var a = [
 {"TEST1":45,"TEST2":23,"TEST3":"DATA1"},
 {"TEST1":46,"TEST2":24,"TEST3":"DATA2"},
 {"TEST1":47,"TEST2":25,"TEST3":"DATA3"}
];

$.each (a, function (bb) {
    console.log (bb);
    console.log (a[bb]);
    console.log (a[bb].TEST1);
});

espero que ajude


17

Para qualquer pessoa que esteja presa a isso, provavelmente não está funcionando porque a chamada ajax está interpretando os dados retornados como texto - ou seja, ainda não é um objeto JSON.

Você pode convertê-lo em um objeto JSON manualmente, usando o comando parseJSON ou simplesmente adicionando a propriedade dataType: 'json' à sua chamada ajax. por exemplo

jQuery.ajax({
    type: 'POST',
    url: '<?php echo admin_url('admin-ajax.php'); ?>',
    data: data, 
    dataType: 'json', // ** ensure you add this line **
    success: function(data) {
        jQuery.each(data, function(index, item) {
            //now you can access properties using dot notation
        });
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("some error");
    }
});

Isso está me dando "dados não definidos".
Hugh Seagraves #

Você deve usar sua própria variável que armazena os dados que você está passando para o URL. Se a variável de dados é chamado mydata então usar dados: mydata
Dave Hilditch

Ah Tenho agora. Obrigado.
precisa

Uncaught TypeError: Cannot use 'in' operator to search for '188' inrecebendo esse erro.
Si8

15

Acesse a matriz json como faria com qualquer outra matriz.

for(var i =0;i < itemData.length-1;i++)
{
  var item = itemData[i];
  alert(item.Test1 + item.Test2 + item.Test3);
}

1
questão de idade, mas como você poderia loop através de teclas de JSON sem saber os nomes ... como Test1, Test2, ext ...
BarclayVision

@BarclayVision Você acabou de usar a chave como um número. A primeira chave é [0], a próxima [1]e assim por diante.
precisa saber é o seguinte

podemos usar outra chamada ajax dentro deste loop for? Se sim, por favor me diga como?
Jyoti Jadhav

5

Foi o que descobri para visualizar facilmente todos os valores de dados:

var dataItems = "";
$.each(data, function (index, itemData) {
    dataItems += index + ": " + itemData + "\n";
});
console.log(dataItems);


4

Experimente a função jQuery.map , funciona muito bem com mapas.

var mapArray = {
  "lastName": "Last Name cannot be null!",
  "email": "Email cannot be null!",
  "firstName": "First Name cannot be null!"
};

$.map(mapArray, function(val, key) {
  alert("Value is :" + val);
  alert("key is :" + key);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


2

se você não quer um alerta, ou seja, você quer html, faça isso

...
    $.each(data, function(index) {
        $("#pr_result").append(data[index].dbcolumn);
    });
...

NOTA: use "anexar" e não "html"; caso contrário, o último resultado será o que você verá na sua exibição em html

seu código html deve ficar assim

...
<div id="pr_result"></div>
...

Você também pode estilizar (adicionar classe) a div no jquery antes de renderizá-lo como html


0

Se você estiver usando o método abreviado da função de chamada ajax JQuery, como mostrado abaixo, os dados retornados precisarão ser interpretados como um objeto json para que você possa percorrer.

$.get('url', function(data, statusText, xheader){
 // your code within the success callback
  var data = $.parseJSON(data);
  $.each(data, function(i){
         console.log(data[i]);
      })
})

0

Sou parcial à função de seta ES2015 para encontrar valores em uma matriz

const result = data.find(x=> x.TEST1 === '46');

Checkout Array.prototype.find () AQUI


0

$eachfuncionará .. Outra opção é o jQuery Ajax Callback para resultado da matriz

function displayResultForLog(result) {
  if (result.hasOwnProperty("d")) {
    result = result.d
  }

  if (result !== undefined && result != null) {
    if (result.hasOwnProperty('length')) {
      if (result.length >= 1) {
        for (i = 0; i < result.length; i++) {
          var sentDate = result[i];
        }
      } else {
        $(requiredTable).append('Length is 0');
      }
    } else {
      $(requiredTable).append('Length is not available.');
    }

  } else {
    $(requiredTable).append('Result is null.');
  }
}

0

Eu uso .map para foreach. Por exemplo

success: function(data) {
  let dataItems = JSON.parse(data)
  dataItems = dataItems.map((item) => {
    return $(`<article>
                <h2>${item.post_title}</h2>
                <p>${item.post_excerpt}</p>
              </article>`)
  })
},
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.