JQuery цикл по JSON результат AJAX Успех?

Question

В обратном вызове jQuery AJAX я хочу зациклить результаты объекта. Это пример того, как выглядит ответ в Firebug.

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

Как я могу зациклить результаты, чтобы у меня был доступ к каждому из элементов? Я пробовал что-то вроде ниже, но это не похоже на работу.

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

Answer 1

Вы можете удалить внешнюю петлю и заменить this на data.data:

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

Вы были близки:

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

У вас есть массив объектов / карт, поэтому внешний цикл повторяет их. Внутренний цикл перебирает свойства каждого элемента объекта.

Answer 2

Вы также можете использовать функцию getJSON :

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

Это действительно просто перефразировка ответа ifesdjeen, но я подумал, что это может быть полезно людям.

Answer 3

Если вы используете Fire Fox, просто откройте консоль (используйте клавишу F12) и попробуйте это:

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);
});

надеюсь, это поможет

Answer 4

Для всех, кто застрял с этим, он, вероятно, не работает, потому что вызов ajax интерпретирует ваши возвращенные данные как текст - т.е. это еще не объект JSON.

Вы можете преобразовать его в объект JSON, вручную используя команду parseJSON или просто добавив свойство dataType: 'json' к вашему вызову ajax. например,

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");
    }
});

Answer 5

Доступ к массиву json, как к любому другому массиву.

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

Answer 6

Это то, что я придумал, чтобы легко просмотреть все значения данных:

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

Answer 7

Попробуйте jQuery.map , хорошо работает с картами.

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>

Answer 8

если вы не хотите оповещения, то есть вы хотите HTML, то сделайте это

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

ПРИМЕЧАНИЕ: используйте «append», а не «html», иначе последний результат - это то, что вы увидите в html-представлении

тогда ваш HTML-код должен выглядеть следующим образом

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

Вы также можете стилизовать (добавить класс) div в jquery, прежде чем он отобразится как html

Answer 9

Я неравнодушен к функции стрелки ES2015 для поиска значений в массиве

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

Оформить заказ Array.prototype.find () ЗДЕСЬ

Answer 10

Если вы используете краткий метод функции вызова JJuery ajax, как показано ниже, возвращаемые данные должны быть интерпретированы как объект json, чтобы вы могли проходить по ним.

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