jQuery loop over hasil JSON dari AJAX Success?

152

Pada sukses callback jQuery AJAX saya ingin mengulang hasil objek. Ini adalah contoh bagaimana respons terlihat di Firebug.

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

Bagaimana saya bisa mengulang hasil sehingga saya akan memiliki akses ke masing-masing elemen? Saya telah mencoba sesuatu seperti di bawah ini tetapi ini sepertinya tidak berhasil.

jQuery.each(data, function(index, itemData) {
  // itemData.TEST1
  // itemData.TEST2
  // itemData.TEST3
});
aherrick
sumber
1
Ini seharusnya bekerja. Apakah Anda yakin kode yang persis sama dan data yang sama?
Tamas Czinege

Jawaban:

255

Anda dapat menghapus lingkaran luar dan ganti thisdengan data.data:

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

Anda sudah dekat:

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

Anda memiliki larik objek / peta sehingga loop luar beralih di atasnya. Loop dalam berulang pada properti pada setiap elemen objek.

cletus
sumber
Loop pertama adalah untuk "kategori" sedangkan loop di dalamnya adalah untuk "atribut." Bagaimana lagi yang dilakukan?
dcolumbus
Bagaimana jika Anda ingin bekerja dengan elemen objek daripada propertinya? Mengapa loop @ aherrick tidak berfungsi?
StuperUser
1
Jika perulangan ini digunakan dalam fungsi terpisah, $(data)alih-alih data, variabel kselalu mengembalikan 0.
user1226868
2
Bisakah seseorang menjelaskan variabel k & v yang diteruskan ke fungsi kedua?
Brent Connor
@BrentConnor dalam hal ini, k & v mewakili kunci & nilai array yang sedang diputar. Baca di fungsi jquery .each ()
Ghost Echo
80

Anda juga dapat menggunakan fungsi getJSON :

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

Ini benar-benar hanya penulisan ulang jawaban ifesdjeen, tetapi saya pikir ini mungkin membantu orang.

clone45
sumber
Ini membantu. Untuk beberapa alasan saya tidak bisa mendapatkan jawaban @cletus untuk bekerja tetapi ini berhasil. Tidak yakin apa rahasia besar tentang jQuery tetapi kode sederhana tidak selalu berfungsi seperti yang Anda harapkan.
AturSams
38

Jika Anda menggunakan Fire Fox, cukup buka konsol (gunakan tombol F12) dan coba ini:

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

semoga membantu

0100110010101
sumber
17

Untuk orang lain yang terjebak dengan ini, itu mungkin tidak berfungsi karena panggilan ajax mengartikan data Anda yang dikembalikan sebagai teks - artinya ini belum menjadi objek JSON.

Anda bisa mengonversinya menjadi objek JSON dengan secara manual menggunakan perintah parseJSON atau cukup menambahkan dataType: properti 'json' ke panggilan ajax Anda. misalnya

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");
    }
});
Dave Hilditch
sumber
Ini memberi saya "data tidak terdefinisi".
Hugh Seagraves
Anda harus menggunakan variabel Anda sendiri yang menyimpan data yang Anda sampaikan ke url. Jika variabel data Anda disebut mydata kemudian gunakan data: mydata
Dave Hilditch
Ah. Mengerti sekarang Terima kasih.
Hugh Seagraves
Uncaught TypeError: Cannot use 'in' operator to search for '188' inmendapatkan kesalahan itu.
Si8
15

Akses json array seperti yang Anda lakukan pada array lainnya.

for(var i =0;i < itemData.length-1;i++)
{
  var item = itemData[i];
  alert(item.Test1 + item.Test2 + item.Test3);
}
Toby Allen
sumber
1
pertanyaan lama, tetapi bagaimana Anda bisa memutar melalui tombol json tanpa mengetahui nama-nama ... seperti Test1, Test2, ext ...
BarclayVision
@BarclayVision Anda cukup menggunakan kunci sebagai angka. Kunci pertama adalah [0], selanjutnya [1], dan seterusnya.
copilot0910
Bisakah kita menggunakan panggilan ajax lain di dalam ini untuk loop? Jika ya maka Tolong beritahu saya Bagaimana?
Jyoti Jadhav
5

Inilah yang saya buat untuk dengan mudah melihat semua nilai data:

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

Yovav
sumber
4

Coba fungsi jQuery.map , berfungsi cukup baik dengan peta.

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>

PanwarS87
sumber
2

jika Anda tidak ingin lansiran, yaitu Anda ingin html, maka lakukan ini

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

CATATAN: gunakan "tambahkan" bukan "html" yang lain hasil terakhir adalah apa yang akan Anda lihat pada tampilan html Anda

maka kode html Anda akan terlihat seperti ini

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

Anda juga bisa memberi style (add class) div di jquery sebelum dirender sebagai html

Orang Mati
sumber
0

Jika Anda menggunakan metode singkat fungsi panggilan ajax JQuery seperti yang ditunjukkan di bawah ini, data yang dikembalikan perlu ditafsirkan sebagai objek json agar Anda dapat mengulang.

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

Saya sebagian ke fungsi panah ES2015 untuk menemukan nilai dalam array

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

Lihat Array.prototype.find () DI SINI

Leonardo Wildt
sumber
0

$eachakan berfungsi .. Pilihan lain adalah jQuery Ajax Callback untuk hasil array

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

Saya menggunakan .map untuk foreach. Sebagai contoh

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>`)
  })
},
dimitar
sumber