AJAX Başarı JSON sonucu jQuery döngü?


152

JQuery AJAX başarı geri arama nesnenin sonuçları üzerinde döngü istiyorum. Bu, yanıtın Firebug'da nasıl göründüğüne bir örnektir.

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

Her bir öğeye erişebilmem için sonuçları nasıl değiştirebilirim? Aşağıdaki gibi bir şey denedim ama bu çalışmıyor gibi görünüyor.

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

1
Bu çalışmalı. Bunun tam olarak aynı kod ve aynı veriler olduğundan emin misiniz?
Tamas Czinege

Yanıtlar:


255

Eğer dış döngü kaldırmak ve yerine thissahip data.data:

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

Yakınız:

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

Nesnelerin / haritaların bir dizisine sahipsiniz, böylece dış döngü bunların üzerinde yinelenir. İç döngü, her nesne öğesindeki özellikler üzerinde yinelenir.


İlk döngü bir "kategori", bunun içindeki bir döngü bir "öznitelik" içindir. Başka nasıl yapılır?
dcolumbus

Özellikleri yerine nesne öğesiyle çalışmak isterseniz ne olur? @ Aherrick'in sorudaki döngüsü neden çalışmıyor?
StuperUser

1
Bu döngü, ayrı bir fonksiyon kullanımda kullanılırsa $(data)yerine data, aksi değişken kdaima 0. döndürür
user1226868

2
Birisi ikinci işleve geçirilen k & v değişkenlerini açıklayabilir mi?
Brent Connor

@BrentConnor bu durumda k & v, çevrilen dizinin anahtar ve değerini temsil eder. Jquery .each () işlevi hakkında bilgi edinin
Ghost Echo

80

GetJSON işlevini de kullanabilirsiniz :

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

Bu gerçekten sadece ifesdjeen'in cevabının yeniden gözden geçirilmesidir, ancak bunun insanlar için yararlı olabileceğini düşündüm.


Bu yardımcı oldu. Bazı nedenlerden dolayı @cletus'un işe yanıtını alamadım ama bu işe yaradı. JQuery hakkındaki büyük gizemin ne olduğundan emin değilim, ancak basit kod her zaman beklediğiniz gibi çalışmaz.
AturSams

38

Fire Fox kullanıyorsanız, bir konsol açın (F12 tuşunu kullanın) ve şunu deneyin:

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

Umarım yardımcı olur


17

Ajax çağrısı, döndürülen verilerinizi metin olarak yorumladığından, muhtemelen bununla sıkışan herkes için işe yaramıyor - yani henüz bir JSON nesnesi değil.

ParseJSON komutunu kullanarak veya ajax çağrınıza dataType: 'json' özelliğini ekleyerek onu bir JSON nesnesine dönüştürebilirsiniz. Örneğin

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

Bu bana "veriler tanımsız" veriyor.
Hugh Seagraves

URL'ye ilettiğiniz verileri depolayan kendi değişkeninizi kullanmalısınız. Veri değişkeniniz mydata olarak adlandırılırsa verileri kullanın: mydata
Dave Hilditch

Ah. Şimdi anladım. Teşekkürler.
Hugh Seagraves

Uncaught TypeError: Cannot use 'in' operator to search for '188' inbu hatayı alıyorum.
Si8

15

Diğer dizilerde olduğu gibi json dizisine erişin.

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

1
eski soru, ama nasıl isimleri bilmeden json tuşları ile döngü ... Test1, Test2, ext gibi ...
BarclayVision

@BarclayVision Anahtarı sadece bir sayı olarak kullanırsınız. İlk anahtar, [0]sonraki anahtar [1]vb.
copilot0910

bunun için döngü içinde başka bir ajax çağrısı kullanabilir miyiz? Cevabınız evet ise, lütfen bana Nasıl?
Jyoti Jadhav

5

Tüm veri değerlerini kolayca görüntülemek için geldim:

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


4

JQuery.map işlevini deneyin , haritalar ile oldukça iyi çalışır.

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

Eğer uyarı istemiyorsanız, bu html istiyorum, o zaman bunu yapın

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

NOT: "html" değil "append" kullanın aksi takdirde son sonuç html görünümünüzde göreceğiniz şeydir

html kodunuz şöyle görünmelidir

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

Ayrıca jquery'de div html olarak görüntülenmeden stil (sınıf ekleme)


0

Aşağıda gösterildiği gibi JQuery ajax çağrı işlevinin kısa yöntemini kullanıyorsanız, döndürülen verilerin döngü yapabilmeniz için bir json nesnesi olarak yorumlanması gerekir.

$.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

Bir dizideki değerleri bulmak için ES2015 ok işlevinin kısmi olduğumu

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

Checkout Array.prototype.find () BURAYA


0

$eachÇalışacak .. Başka bir seçenek dizi sonucu için jQuery Ajax Geri Arama

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

Foreach için .map kullanıyorum. Örneğin

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>`)
  })
},
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.