JSONオブジェクトから値を読み取る方法

Question

この状況の特異性については申し訳ありませんが、私はその問題について私の頭を覆すことはできません。

私は次のようなJSONファイルを作成しました：

{"characters":[ 
{"name":"battler", "sprites": 
    [{"img":"but_a11_aseru1.png","img":"but_a11_komaru1.png","img":"but_a21_majime1.png","img":"but_b11_majime1.png"}] 
}, 
{"name":"eva", "sprites": 
    [{"img":"eva_a11_akire1.png","img":"eva_b11_majime1.png","img":"eva_b21_naku1.png","img":"eva_b22_warai1.png"}] 
} 
]} 

をそして私はちょうどのために各エントリの最初の「スプライト」のための「IMG」の値をエコーし​​、このコードでそれをロードしようとしています今：たとえば

$.getJSON("./char.json", function(data) { 
      for (i = 0;i < data.characters.length;i++) { 
      alert(JSON.stringify(data.characters[i].sprites[0])); 
    } 
}); 

：私はそれが第二のためにループと「eva_a11_akire1.png」の最初の反復のための「but_a11_aseru1.png」を返すために取得しようとしています。

私はdata.characters[i].sprites[0]を試しましたが、最初のものは{"img":"but_a11_aseru1.png"}（それと同様です）の値を取得しました。 data.characters[i].sprites.imgは未定義となります。私は "："で.splitを使うことができましたが、JSONの使い方を理解したいと思います。

誰かが間違っていることを指摘できますか？ありがとうございました。

Answer 1

あなたのコードで期待される出力（最初の反復のための「but_a11_aseru1.png」）を取得するには、個々の画像に対応する項目とsprites配列を行う必要があります。

{"characters":[ 
    {"name":"battler", "sprites": [ 
    "but_a11_aseru1.png", 
    "but_a11_komaru1.png", 
    "but_a21_majime1.png", 
    "but_b11_majime1.png" 
    ]}, 
    {"name":"eva", "sprites": [ 
    "eva_a11_akire1.png", 
    "eva_b11_majime1.png", 
    "eva_b21_naku1.png", 
    "eva_b22_warai1.png" 
    ]} 
]} 

と

alert(JSON.stringify(data.characters[i].sprites[0])); 

または

{"characters":[ 
    {"name":"battler", "sprites": [ 
    {"img":"but_a11_aseru1.png"}, 
    {"img":"but_a11_komaru1.png"}, 
    {"img":"but_a21_majime1.png"}, 
    {"img":"but_b11_majime1.png"} 
    ]}, 
    {"name":"eva", "sprites": [ 
    {"img":"eva_a11_akire1.png"}, 
    {"img":"eva_b11_majime1.png"}, 
    {"img":"eva_b21_naku1.png"}, 
    {"img":"eva_b22_warai1.png"} 
    ]} 
]} 

と

alert(JSON.stringify(data.characters[i].sprites[0].img)); 

Answer 2

問題は、オリジナルのJSONがうまく構成されていないことです。 "スプライト"を配列として宣言しますが、imgのすべてのキーはのオブジェクトに属します。単一の不正に形成されたオブジェクトの配列ではなく、オブジェクトの配列をスプライトにすることでこれを修正しました。

{ 
    "characters": [{ 
    "name": "battler", 
    "sprites": [{ 
     "img": "but_a11_aseru1.png", 
     "img": "but_a11_komaru1.png", 
     "img": "but_a21_majime1.png", 
     "img": "but_b11_majime1.png" 
    }] 
    }, { 
    "name": "eva", 
    "sprites": [{ 
     "img": "eva_a11_akire1.png", 
     "img": "eva_b11_majime1.png", 
     "img": "eva_b21_naku1.png", 
     "img": "eva_b22_warai1.png" 
    }] 
    }] 
} 

以下のコードは私のために働きます。私はjQueryの$.each()関数を使用しましたが、項目をループしたいものを現実的に使用できました。

var json_data = { 
 
    "characters": [{ 
 
    "name": "battler", 
 
    "sprites": [{ 
 
     "img": "but_a11_aseru1.png" 
 
    }, { 
 
     "img": "but_a11_komaru1.png" 
 
    }, { 
 
     "img": "but_a21_majime1.png" 
 
    }, { 
 
     "img": "but_b11_majime1.png" 
 
    }] 
 
    }, { 
 
    "name": "eva", 
 
    "sprites": [{ 
 
     "img": "eva_a11_akire1.png" 
 
    }, { 
 
     "img": "eva_b11_majime1.png" 
 
    }, { 
 
     "img": "eva_b21_naku1.png" 
 
    }, { 
 
     "img": "eva_b22_warai1.png" 
 
    }] 
 
    }] 
 
}; 
 

 
$.each(json_data.characters, function(i, character) { 
 
    console.log(character.name, " ", character.sprites[0].img); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

あなたは、現在、あなたが同じであるいくつかのキーのIMGで一つのオブジェクトの配列を持っている、ブラウザは最後のものだけが表示されます、スプライトのための残りを別の構造を使用する必要があります省略される。

var data = { 
 
    "characters": [ 
 
    { 
 
     "name":"battler", 
 
     "sprites": [ 
 
     {"img":"but_a11_aseru1.png"}, 
 
     {"img":"but_a11_komaru1.png"}, 
 
     {"img":"but_a21_majime1.png"}, 
 
     {"img":"but_b11_majime1.png"} 
 
     ] 
 
    }, 
 
    { 
 
     "name":"eva", 
 
     "sprites": [ 
 
     {"img":"eva_a11_akire1.png"}, 
 
     {"img":"eva_b11_majime1.png"}, 
 
     {"img":"eva_b21_naku1.png"}, 
 
     {"img":"eva_b22_warai1.png"} 
 
     ] 
 
    } 
 
    ] 
 
}; 
 

 
$.each(data.characters, function(i, char) { 
 
    $.each(char.sprites, function(j, sprite) { 
 
    console.log(sprite.img) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>