So lesen Sie den Wert aus dem JSON-Objekt

Question

Es tut mir leid für die Besonderheit dieser Situation, aber ich kann mich einfach nicht mit dem Problem herumschlagen.

Ich habe die folgende JSON-Datei erstellt:

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

Und ich bin versucht, es mit diesem Code zu laden, nur für die ersten „Sprites“ den Wert für „img“ Echo in jedem Eintrag für jetzt:

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

zum Beispiel: ich versuche, es zu bekommen zurückzukehren „but_a11_aseru1.png“ für die erste Iteration der Schleife und „eva_a11_akire1.png“ für die zweiten.

Ich habe versucht data.characters[i].sprites[0], nur um einen Wert von {"img":"but_a11_aseru1.png"} für die erste (und ähnliche für die zweite) zu erhalten. data.characters[i].sprites.img erscheint als undefiniert. Ich könnte .split am ":" verwenden, aber ich möchte verstehen, wie man JSON richtig benutzt.

Kann jemand darauf hinweisen, was ich falsch mache? Vielen Dank.

Answer 1

erwartete Ausgabe zu erhalten ("but_a11_aseru1.png" für die erste Iteration) mit Ihrem Code, müssen Sie sprites ein Array mit Elementen machen, um einzelne Bilder entsprechen:

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

und

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

oder

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

und

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

Answer 2

Ihr Problem ist, dass Ihre ursprüngliche JSON nicht gut ausgebildet ist. Sie deklarieren "Sprites" als ein Array, aber alle img Schlüssel gehören zu einem einzigen Objekt. Dies wurde behoben, indem Sprites ein Array von Objekten anstelle eines Arrays eines einzelnen schlecht geformten Objekts erstellt wurden.

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

Der folgende Code funktioniert für mich. Ich habe die $.each()-Funktion von jQuery verwendet, aber Sie hätten realistisch alles verwenden können, was Sie durch die Elemente durchlaufen wollten.

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

Sie eine andere Struktur für die Sprites verwenden sollte, die derzeit ein Array mit einem Objekt haben mit mehreren Tasten img, die die gleichen sind, Browser wird nur die letzte, den Rest wird weggelassen.

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>