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を解析しましたか?
DenysSéguret2013

オブジェクトの配列ですか?([]が欠落していますか、それとも存在しませんか?)
lpiepiora 2013

9
JSONでも配列でもありません。
JJJ 2013


タイトルを変更してください。これは配列ではなく、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 2013

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

Ericsコメント後の更新

エリックは指摘アレイ用のループが予期しない結果を持つことができます。参照されている質問には、賛否両論について長い議論があります。for in

for(var i ...

しかし、以下はかなり節約されているようです:

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 ループ配列のために使用すべきではない
エリック・

配列内包表記はを使用しますfor eachfor ... in ...オブジェクトキーを任意の順序で列挙するための言語構造です。それは配列にとって正しい構成ではありません。
エリック

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

さて、コンマで区切られた2つのJSONオブジェクトがあることがわかります。両方が配列([...])内にある場合は、より理にかなっています。

そして、それらが配列内にある場合は、標準の「for var i = 0 ...」タイプのループを使用するだけです。そのままでは、文字列「1」の「id」プロパティを取得し、次に「hi」の「id」などを取得しようとするでしょう。


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

Oh my ...なぜ誰もがこれをそんなに難しくするのですか?

データスニペットを少し拡張する必要があります。適切なjsonになるためには、このようにする必要があります。配列名の属性 "item"を含めるだけです。

{"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"
}]}

あなたのJavaスクリプトは単純です

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.