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

136

В обратном вызове 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
});
  • 1
    Это должно работать. Вы уверены, что это точно такой же код и те же данные?
Теги:

11 ответов

232
Лучший ответ

вы можете удалить внешний контур и заменить this на data.data:

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

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

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

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

Поделиться
  • 4
    Почему двойной цикл?
  • 0
    Первый цикл предназначен для «категории», а цикл внутри него для «атрибута». Как еще это сделать?
Показать ещё 7 комментариев
80

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

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

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

Поделиться
  • 0
    Это помогло. По какой-то причине я не смог получить ответ @cletus на работу, но это помогло. Не уверен, что великая загадка в jQuery, но простой код не всегда работает так, как вы ожидаете.
39

Если вы используете 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);
});

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

Поделиться
14

Для кого-то, кто застрял в этом, он, вероятно, не работает, потому что вызов 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");
    }
});
Поделиться
  • 0
    Это дает мне «данные не определены».
  • 0
    Вы должны использовать свою собственную переменную, которая хранит данные, которые вы передаете в URL. Если ваша переменная данных называется mydata, тогда используйте data: mydata
Показать ещё 2 комментария
12

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

for(var i =0;i < itemData.length-1;i++)
{
  var item = itemData[i];
  alert(item.Test1 + item.Test2 + item.Test3);
}
Поделиться
  • 1
    старый вопрос, но как вы могли бы перебирать ключи JSON, не зная имен ... как Test1, Test2, ext ...
  • 0
    @ BarclayVision Вы просто используете ключ в качестве числа. Первый ключ - [0] , следующий [1] и т. Д.
Показать ещё 1 комментарий
7

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

$.getJSON('/your/script.php', function(data) {
    $.each(data, function(index) {
        alert(data[index].TEST1);
        alert(data[index].TEST2);
    });
});
Поделиться
  • 0
    Почему это не популярный ответ? Он использует одну петлю и делает трюк очень хорошо. Принятый ответ делает двойной foreach без ясного значения для первого foreach.
  • 0
    undefined это выход для меня
Показать ещё 1 комментарий
4

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

var dataItems = "";
$.each(data, function (index, itemData) {
    dataItems += index + ": " + itemData + "\n";
});
console.log(dataItems);
Поделиться
  • 0
    На самом деле этот работает отлично!
4

Попробуйте функцию 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="/jquery.min.js"></script>
Поделиться
2

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

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

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

тогда ваш HTML-код должен выглядеть так

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

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

Поделиться
0

Я использую .map для foreach. Например

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>')
      })
    },
Поделиться
0

$each будет работать. Еще один вариант jQuery Ajax Callback для результата массива

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.');
    }
  }
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню