jQuery วนลูปมากกว่าผล JSON จาก AJAX Success หรือไม่

ในการเรียกกลับสำเร็จ 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
});

คุณสามารถลบลูปภายนอกและแทนที่thisด้วยdata.data:

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

คุณสนิท:

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

คุณมีอาร์เรย์ของวัตถุ / แผนที่เพื่อวนรอบนอกวนซ้ำมากกว่านั้น การวนซ้ำภายในทำซ้ำผ่านคุณสมบัติในแต่ละองค์ประกอบของวัตถุ

คุณยังสามารถใช้ฟังก์ชันgetJSON :

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

นี่เป็นเพียงการอ้างอิงตามคำตอบของ ifesdjeen แต่ฉันคิดว่ามันอาจเป็นประโยชน์กับผู้คน

หากคุณใช้ 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);
});

หวังว่ามันจะช่วย

สำหรับคนอื่นที่ติดอยู่กับสิ่งนี้อาจไม่ทำงานเนื่องจากการโทร 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");
    }
});

เข้าถึงอาร์เรย์ json เช่นเดียวกับที่คุณทำกับอาร์เรย์อื่น ๆ

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

นี่คือสิ่งที่ฉันคิดขึ้นมาเพื่อดูค่าข้อมูลทั้งหมดได้อย่างง่ายดาย:

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

ลองใช้ฟังก์ชั่น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>

หากคุณไม่ต้องการการแจ้งเตือนนั่นคือคุณต้องการ html แล้วทำสิ่งนี้

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

หมายเหตุ: ใช้ "ผนวก" ไม่ใช่ "html" มิฉะนั้นผลลัพธ์สุดท้ายคือสิ่งที่คุณจะเห็นในมุมมอง html ของคุณ

จากนั้นโค้ด html ของคุณควรมีลักษณะเช่นนี้

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

นอกจากนี้คุณยังสามารถจัดรูปแบบ (เพิ่มคลาส) div ใน jquery ก่อนที่จะแสดงผลเป็น html

หากคุณใช้วิธีการสั้น ๆ ของฟังก์ชั่นการโทร 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]);
      })
})

ฉันเป็นส่วนหนึ่งของฟังก์ชั่นลูกศร ES2015 สำหรับการค้นหาค่าในอาร์เรย์

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

ชำระเงิน Array.prototype.find () ที่นี่

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

ฉันใช้. 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>`)
  })
},