Цикл jQuery над JSON результатом успіху AJAX?


152

У зворотному зворотному звороті 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
Це має спрацювати. Ви впевнені, що це точно той самий код і ті самі дані?
— Тамас Цінеге

Відповіді:


255

ви можете зняти зовнішню петлю і замінити thisна data.data:

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

Ви були поруч:

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

У вас є масив об'єктів / карт, щоб зовнішній цикл переходив над ними. Внутрішня петля повторює властивості кожного елемента об'єкта.


Перший цикл призначений для "категорії", а цикл всередині цього - для "атрибута". Як ще це робиться?
— dcolumbus

Що робити, якщо ви хочете працювати з елементом об'єкта, а не з його властивостями? Чому цикл @ aherrick у питанні не працює?
— StuperUser

1
Якщо це циклічне використання використовується в окремому використанні функції $(data)замість data, в іншому випадку змінна kзавжди повертає 0.
— user1226868

2
Чи може хтось пояснити змінні k & v, які передаються другій функції?
— Брент Коннор

@BrentConnor у цьому випадку k & v являють собою ключ & значення масиву, який проходить через цикл. Прочитайте функцію jquery .each ()
— Ghost Echo

80

Ви також можете використовувати функцію getJSON :

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

Це справді лише переформулювання відповіді ifesdjeen, але я подумав, що це може бути корисним для людей.


Це допомогло. Чомусь мені не вдалося отримати відповідь @cletus, але це все-таки вдалося. Не впевнений, яка головна таємниця щодо jQuery, але простий код не завжди працює так, як ви цього очікували.
— AturSams

38

Якщо ви використовуєте 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);
});

сподіваюся, що це допомагає


17

Для інших, хто застряг у цьому, це, ймовірно, не працює, тому що виклик 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");
    }
});

Це дає мені "дані не визначені".
— Х'ю Сігрейз

Ви повинні використовувати власну змінну, яка зберігає дані, які ви передаєте в URL. Якщо ваша змінна інформація називається мої дані, то використовуйте дані: mydata
— Дейв Хілдіч

Ага. Зрозумів зараз. Дякую.
— Х'ю Seagraves

Uncaught TypeError: Cannot use 'in' operator to search for '188' inотримання цієї помилки.
— Si8

15

Доступ до масиву 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 ...
— BarclayVision

@BarclayVision Ви просто використовуєте ключ як число. Перший ключ [0], наступний [1]тощо.
— copilot0910

чи можемо ми використовувати інший дзвінок ajax всередині цього для циклу? Якщо так, то скажіть, будь ласка, як?
— Jyoti Jadhav

5

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

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


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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


2

якщо ви не хочете оповіщення, тобто ви хочете html, зробіть це

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

ПРИМІТКА: використовуйте "додавати", а не "html", інакше останній результат - це те, що ви будете бачити у своєму представленні html

тоді ваш html-код повинен виглядати приблизно так

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

Ви також можете стилізувати (додавати клас) div в jquery, перш ніж він буде представлений як html


0

Якщо ви використовуєте короткий метод функції виклику JQuery 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]);
      })
})

0

Я є частиною функції стрілки ES2015 для пошуку значень у масиві

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

Оформити замовлення Array.prototype.find () ТУТ


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

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>`)
  })
},
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.