jquery loop กับข้อมูล Json โดยใช้ $ .each


160

ฉันได้ JSON ต่อไปนี้กลับมาในตัวแปรที่เรียกว่า data

นี่คือ JSON ที่ได้รับผลตอบแทน ...

[ 
{"Id": 10004, "PageName": "club"}, 
{"Id": 10040, "PageName": "qaz"}, 
{"Id": 10059, "PageName": "jjjjjjj"}
]

และฉันพยายามที่จะวนรอบคอลเลกชันโดยใช้ $. แต่ละครั้ง แต่ฉันพบปัญหาที่การแจ้งเตือนแสดงไม่ได้กำหนด ฉันลองใช้ไวยากรณ์ที่แตกต่างกันมากมาย แต่ไม่สามารถเข้าใจได้

JQuery ที่ฉันใช้อยู่คือ

$.each(data, function(i, item) {
    alert(item.PageName);
});

คนใดคนหนึ่งสามารถชี้ฉันในทิศทางที่ถูกต้องได้หรือไม่?

แก้ไข นี่คือรหัสที่ฉันใช้เพื่อคว้าข้อมูล

$.getJSON('/Cms/GetPages/123', null, function(data) {
  fillSelect(data);
});

และนี่คือฟังก์ชั่นที่ถูกเรียกเมื่อโทรกลับ

function fillSelect(data) {
  alert(data);
  $.each(data, function(i, item) {
    alert(item.PageName);
  });
}

แก้ไข 2 สิ่งนี้ทำให้ฉันสับสนเล็กน้อยตามเอกสารที่ควรทำงานตามที่ฉันมี แต่มันไม่ได้ ตามพู้ทำเล่นส่วนหัวแสดง: -

Content-Type: application/json; charset=utf-8

และ JSON นั้นถูกต้องด้านบน ฉันกำลังใช้โครเมี่ยมถ้ามันทำให้แตกต่าง จะทดสอบใน IE และ FF ....

แก้ไข 3

ใช้ $ .get สร้าง

"[\r\n {\r\n \"Id\": 10041,\r\n \"PageName\": \"01234567890\",\r\n \"MetaId\": 1000,\r\n \"TemplateId\": 2\r\n },\r\n {\r\n \"Id\": 10001,\r\n \"PageName\": \"about\",\r\n \"MetaId\": 1000,\r\n \"TemplateId\": 1\r\n },\r\n {\r\n \"Id\": 10056,\r\n \"PageName\": \"fdgdfgdfg\",\r\n \"MetaId\": 1000,\r\n \"TemplateId\": 1\r\n },\r\n {\r\n \"Id\": 10052,\r\n \"PageName\": \"hjkhjk\",\r\n \"MetaId\": 1000,\r\n \"TemplateId\": 2\r\n },\r\n {\r\n \"Id\": 10059,\r\n \"PageName\": \"jjjjjjj\",\r\n \"MetaId\": 1000,\r\n \"TemplateId\": 1\r\n },\r\n {\r\n \"Id\": 10057,\r\n \"PageName\": \"qqqqq\",\r\n \"MetaId\": 1000,\r\n \"TemplateId\": 2\r\n },\r\n {\r\n \"Id\": 10054,\r\n \"PageName\": \"qwqw\",\r\n \"MetaId\": 1000,\r\n \"TemplateId\": 2\r\n }\r\n]"

มันใช้งานได้สำหรับฉัน ตรวจสอบให้แน่ใจว่าข้อมูลถูกส่งไปยังแต่ละวิธีอย่างถูกต้อง
kgiannakakis

คำตอบ:


303
var data = [ 
 {"Id": 10004, "PageName": "club"}, 
 {"Id": 10040, "PageName": "qaz"}, 
 {"Id": 10059, "PageName": "jjjjjjj"}
];

$.each(data, function(i, item) {
    alert(data[i].PageName);
});

$.each(data, function(i, item) {
    alert(item.PageName);
});

สองตัวเลือกเหล่านี้ทำงานได้ดีเว้นแต่คุณจะมีสิ่งที่ชอบ:

var data.result = [ 
 {"Id": 10004, "PageName": "club"}, 
 {"Id": 10040, "PageName": "qaz"}, 
 {"Id": 10059, "PageName": "jjjjjjj"}
];

$.each(data.result, function(i, item) {
    alert(data.result[i].PageName);
});

แก้ไข:

ลองทำสิ่งนี้และอธิบายสิ่งที่เกิดขึ้น

$.get('/Cms/GetPages/123', function(data) {
  alert(data);
});

สำหรับการแก้ไข 3:

วิธีนี้แก้ไขปัญหาได้ แต่ไม่ใช่แนวคิดที่จะใช้ "eval" คุณควรดูว่าการตอบสนองใน '/ Cms / GetPages / 123' เป็นอย่างไร

$.get('/Cms/GetPages/123', function(data) {
  $.each(eval(data.replace(/[\r\n]/, "")), function(i, item) {
   alert(item.PageName);
  });
});

1
ดูเหมือนว่าฉันจะต้องเพิ่มeval(data)
Rippo

ในฟังก์ชั่น "httpData" ใน jQuery คุณสามารถเห็นหน้าต่างที่เรียกว่า ["eval"] สำหรับข้อมูล json คุณไม่จำเป็นต้องใช้ eval บรรทัดนี้ "$. get ('/ Cms / GetPages / 123'" คือการแสดงให้คุณเห็นว่าได้รับใน "data"
andres descalzo


มีคำตอบที่อัปเดตแล้ว (ดู EDIT 3) เพื่อแสดงสิ่งที่$.getผลิต
Rippo

คุณจะคืนข้อมูลใน "/ Cms / GetPages / 123" ได้อย่างไร
andres descalzo

17

คุณแปลงข้อมูลจากสตริงเป็นวัตถุ JavaScript แล้วหรือยัง

คุณสามารถทำได้ด้วยdata = eval('(' + string_data + ')'); หรือซึ่งปลอดภัยกว่าdata = JSON.parse(string_data);แต่ภายหลังจะใช้งานได้เฉพาะใน FF 3.5 หรือถ้าคุณใส่json2.js

jQuery ตั้งแต่ 1.4.1 $.parseJSON()ยังมีฟังก์ชั่นสำหรับการที่

แต่ที่จริงแล้ว$.getJSON()ควรให้ json แยกวิเคราะห์วัตถุแล้วดังนั้นคุณควรตรวจสอบทุกอย่างละเอียดมีความผิดพลาดเล็กน้อยฝังอยู่ที่ไหนสักแห่งเช่นคุณอาจลืมพูดอะไรบางอย่างใน json หรือวงเล็บอันใดอันหนึ่งขาดหายไป


ดูเหมือนว่าฉันต้องการเพิ่มfillselect(eval(data));
Rippo

BTW เข้ากันได้evalอย่างไร
Rippo

3
data = eval('('+string_data+')');ที่ควรจะเป็น นอกจากนี้ jQuery ยังมีฟังก์ชั่นอื่นdata = jQuery.parseJSON(string_data);
เกร็ก

มีบางอย่างไม่ถูกต้อง ใช้eval(data)งานได้เท่านั้น โปรดดูแก้ไขของฉัน 2
Rippo

2
ฉันเห็น jQuery.parseJSON (string_data) ล้มเหลวในบางกรณีที่ data = eval ('(' + string_data + ')') ใช้งานได้ดี
Dominik Ras

5

getJSON จะประเมินข้อมูลให้กับ JSON สำหรับคุณตราบใดที่มีการใช้ประเภทเนื้อหาที่ถูกต้อง ตรวจสอบให้แน่ใจว่าเซิร์ฟเวอร์ส่งคืนข้อมูลเป็น application / json


1
ตามพู้ทำเล่นประเภทเนื้อหาคือContent-Type: application/json; charset=utf-8
Rippo

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.