JavaScript วนซ้ำอาร์เรย์ json หรือไม่


151

ฉันพยายามวนซ้ำอาร์เรย์ json ต่อไปนี้:

{
  "id": "1",
  "msg": "hi",
  "tid": "2013-05-05 23:35",
  "fromWho": "hello1@email.se"
}, {
  "id": "2",
  "msg": "there",
  "tid": "2013-05-05 23:45",
  "fromWho": "hello2@email.se"
}

และได้ลองทำดังนี้

for (var key in data) {
   if (data.hasOwnProperty(key)) {
      console.log(data[key].id);
   }
}

แต่ด้วยเหตุผลบางอย่างที่ฉันได้รับเฉพาะส่วนแรกค่า id 1 เท่านั้น

ความคิดใด ๆ


มีวงเล็บบางอย่างขาดหายไปหรือไม่ ตอนนี้ดูเหมือนจะไม่เหมือนอาร์เรย์จริงๆ และคุณแยกวิเคราะห์ JSON หรือไม่
Denys Séguret

มันเป็นอาร์เรย์ของวัตถุหรือไม่ (คุณหายไป [] หรือพวกเขาไม่อยู่ที่นั่น?)
lpiepiora

9
มันไม่ใช่จอนหรืออาเรย์
JJJ


โปรดเปลี่ยนชื่อนี่คือการทำซ้ำผ่านคุณสมบัติวัตถุ JSON ไม่ใช่อาร์เรย์
Taylored Web Sites

คำตอบ:


222

JSON ของคุณควรมีลักษณะเช่นนี้:

var json = [{
    "id" : "1", 
    "msg"   : "hi",
    "tid" : "2013-05-05 23:35",
    "fromWho": "hello1@email.se"
},
{
    "id" : "2", 
    "msg"   : "there",
    "tid" : "2013-05-05 23:45",
    "fromWho": "hello2@email.se"
}];

คุณสามารถวนซ้ำแถวลำดับดังนี้:

for(var i = 0; i < json.length; i++) {
    var obj = json[i];

    console.log(obj.id);
}

หรืออย่างนี้ (แนะนำจาก Eric) ระวังด้วยการสนับสนุน IE

json.forEach(function(obj) { console.log(obj.id); });

11
หรือรัดกุมมากขึ้นjson.forEach(function(obj) { console.log(obj.id); });
เอริค

4
ยกเว้นใน IE8 (ตามปกติทุกคนยกเว้น IE;))
lpiepiora

4
ฉันคิดว่าตัวอย่างนั้นอาจสร้างความสับสนได้เนื่องจาก var json ไม่ใช่วัตถุ JSON แต่เป็นอาร์เรย์ ในกรณีนี้. forEach ทำงานได้ดี แต่เมื่อคุณใช้วัตถุ json มันจะไม่ทำงาน
mpoletto ถึง

27

มีปัญหาเล็กน้อยในโค้ดของคุณอันดับแรก json ของคุณจะต้องมีลักษณะดังนี้:

var json = [{
"id" : "1", 
"msg"   : "hi",
"tid" : "2013-05-05 23:35",
"fromWho": "hello1@email.se"
},
{
"id" : "2", 
"msg"   : "there",
"tid" : "2013-05-05 23:45",
"fromWho": "hello2@email.se"
}];

ถัดไปคุณสามารถทำซ้ำแบบนี้:

for (var key in json) {
if (json.hasOwnProperty(key)) {
  alert(json[key].id);
  alert(json[key].msg);
}
}

และให้ผลลัพธ์ที่สมบูรณ์แบบ

ดูซอที่นี่: http://jsfiddle.net/zrSmp/


16
var arr = [
  {
  "id": "1",
  "msg": "hi",
  "tid": "2013-05-05 23:35",
  "fromWho": "hello1@email.se"
  }, {
  "id": "2",
  "msg": "there",
  "tid": "2013-05-05 23:45",
  "fromWho": "hello2@email.se"
  }
];

forEach วิธีการใช้งานง่าย

arr.forEach(function(item){
  console.log('ID: ' + item.id);
  console.log('MSG: ' + item.msg);
  console.log('TID: ' + item.tid);
  console.log('FROMWHO: ' + item.fromWho);
});

16

ลองนี้

var json = [{
    "id" : "1", 
    "msg"   : "hi",
    "tid" : "2013-05-05 23:35",
    "fromWho": "hello1@email.se"
},
{
    "id" : "2", 
    "msg"   : "there",
    "tid" : "2013-05-05 23:45",
    "fromWho": "hello2@email.se"
}];

json.forEach((item) => {
  console.log('ID: ' + item.id);
  console.log('MSG: ' + item.msg);
  console.log('TID: ' + item.tid);
  console.log('FROMWHO: ' + item.fromWho);
});

10

ตั้งแต่ฉันเริ่มดูมัน:

var data = [{
    "id": "1",
    "msg": "hi",
    "tid": "2013-05-05 23:35",
    "fromWho": "hello1@email.se"
}, {
    "id": "2",
    "msg": "there",
    "tid": "2013-05-05 23:45",
    "fromWho": "hello2@email.se"
}]

และฟังก์ชั่นนี้

var iterateData =function(data){   for (var key in data) {
       if (data.hasOwnProperty(key)) {
          console.log(data[key].id);
       }
    }};

คุณสามารถโทรได้เช่นนี้

iterateData(data); // write 1 and 2 to the console

อัปเดตหลังจากที่คอมเม้นท์

ในฐานะที่เป็นเอริคชี้ให้เห็นห่วงสำหรับอาร์เรย์ที่สามารถมีผลที่ไม่คาดคิด คำถามที่อ้างอิงมีการอภิปรายยาวเกี่ยวกับข้อดีและข้อเสียfor in

ทดสอบด้วยสำหรับ (var i ...

แต่ดูเหมือนว่า follwing ค่อนข้างประหยัด:

for(var i = 0; i < array.length; i += 1)

แม้ว่าการทดสอบในโครเมียมจะมีผลดังต่อไปนี้

var ar = [];
ar[0] = "a"; 
ar[1] = "b";
ar[4] = "c";

function forInArray(ar){ 
     for(var i = 0; i < ar.length; i += 1) 
        console.log(ar[i]);
}

// calling the function
// returns a,b, undefined, undefined, c, undefined
forInArray(ar); 

ทดสอบด้วย .forEach()

อย่างน้อยใน chrome 30 จะทำงานอย่างที่คาดไว้

var logAr = function(element, index, array) {
    console.log("a[" + index + "] = " + element);
}
ar.forEach(logAr); // returns a[0] = a, a[1] = b, a[4] = c

การเชื่อมโยง


2
-1 - for ... in ไม่ควรใช้ลูปสำหรับอาร์เรย์
Eric

for eachใช้อาร์เรย์ comprehensions for ... in ...เป็นโครงสร้างภาษาสำหรับการแจกแจงคีย์ของวัตถุตามลำดับโดยพลการ นั่นไม่ใช่โครงสร้างที่เหมาะสมสำหรับอาร์เรย์
Eric

9

มันใช้งานได้ ฉันเพิ่งเพิ่มวงเล็บเหลี่ยมลงในข้อมูล JSON ข้อมูลคือ:

var data = [
    { 
        "id": "1",
        "msg": "hi", 
        "tid": "2013-05-05 23:35", 
        "fromWho": "hello1@email.se" 
    }, 
    { 
        "id": "2", 
        "msg": "there", 
        "tid": "2013-05-05 23:45", 
        "fromWho": "hello2@email.se"
    }
]

และห่วงคือ:

for (var key in data) {
   if (data.hasOwnProperty(key)) {
         alert(data[key].id);
   }
} 

6

จะต้องเป็นอาร์เรย์ถ้าคุณต้องการวนซ้ำ คุณมีโอกาสมากที่ขาดหายไปและ[]

var x = [{
    "id": "1",
        "msg": "hi",
        "tid": "2013-05-05 23:35",
        "fromWho": "hello1@email.se"
}, {
    "id": "2",
        "msg": "there",
        "tid": "2013-05-05 23:45",
        "fromWho": "hello2@email.se"
}];

var $output = $('#output');
for(var i = 0; i < x.length; i++) {
    console.log(x[i].id);
}

ลองดู jsfiddle นี้: http://jsfiddle.net/lpiepiora/kN7yZ/


5

สายไปหน่อย แต่ฉันหวังว่าฉันจะช่วยเหลือผู้อื่นได้: D

json ของคุณต้องดูเหมือนสิ่งที่ Niklas พูดไว้แล้ว แล้วคุณไปที่นี่:

for(var key in currentObject){
        if(currentObject.hasOwnProperty(key)) {
          console.info(key + ': ' + currentObject[key]);
        }
   }

หากคุณมีอาร์เรย์หลายมิตินี่คือรหัสของคุณ:

for (var i = 0; i < multiDimensionalArray.length; i++) {
    var currentObject = multiDimensionalArray[i]
    for(var key in currentObject){
            if(currentObject.hasOwnProperty(key)) {
              console.info(key + ': ' + currentObject[key]);
            }
       }
}

3

ทั้งหมดที่ฉันเห็นก็คือว่าคุณมีวัตถุ JSON สองรายการคั่นด้วยเครื่องหมายจุลภาค หากทั้งคู่อยู่ในอาเรย์ ( [...]) มันจะสมเหตุสมผลมากกว่า

และถ้าพวกมันอยู่ในอาร์เรย์คุณก็จะใช้มาตรฐาน "สำหรับ var i = 0 ... " ประเภทของลูป ฉันคิดว่ามันจะพยายามเรียกคืนคุณสมบัติ "id" ของสตริง "1" จากนั้นจึงเป็น "id" ของ "hi" และอื่น ๆ


2

การแก้ปัญหาสั้น ๆ โดยใช้mapและฟังก์ชั่นลูกศร

var data = [{
  "id": "1",
  "msg": "hi",
  "tid": "2013-05-05 23:35",
  "fromWho": "hello1@email.se"
}, {
  "id": "2",
  "msg": "there",
  "tid": "2013-05-05 23:45",
  "fromWho": "hello2@email.se"
}];
data.map((item, i) => console.log('Index:', i, 'Id:', item.id));

และเพื่อครอบคลุมกรณีที่ทรัพย์สิน"id"ไม่ได้ใช้งานfilter:

var data = [{
  "id": "1",
  "msg": "hi",
  "tid": "2013-05-05 23:35",
  "fromWho": "hello1@email.se"
}, {
  "id": "2",
  "msg": "there",
  "tid": "2013-05-05 23:45",
  "fromWho": "hello2@email.se"
}, {
  "msg": "abcde",
  "tid": "2013-06-06 23:46",
  "fromWho": "hello3@email.se"
}];

data.filter(item=>item.hasOwnProperty('id'))
                .map((item, i) => console.log('Index:', i, 'Id:', item.id));


0

โอ้ ... ทำไมทุกคนถึงทำให้เรื่องนี้ยากเหลือเกิน !!

ตัวอย่างข้อมูลของคุณจะต้องมีการขยายตัวเล็กน้อยและจะต้องมีวิธีนี้เพื่อ json ที่เหมาะสม แจ้งให้ทราบล่วงหน้าฉันเพิ่งรวมแอตทริบิวต์ชื่ออาร์เรย์ "รายการ"

{"item":[
{
  "id": "1",
  "msg": "hi",
  "tid": "2013-05-05 23:35",
  "fromWho": "hello1@email.se"
}, {
  "id": "2",
  "msg": "there",
  "tid": "2013-05-05 23:45",
  "fromWho": "hello2@email.se"
}]}

จาวาสคริปต์ของคุณเป็นเพียงแค่

var objCount = json.item.length;
for ( var x=0; x < objCount ; xx++ ) {
    var curitem = json.item[x];
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.