JS Wie innerhalb eines Arrays innerhalb eines den Objektwert aus einem Array bekommen jede Schleife

Question

versuch den Wert aus der JSON-Datei zu erhalten

Hier ist ein Live-codepen von dem, was ich auf codepen.io/ arbeite krm218/Stift/vGvaNN

Hier ist ein Screenshot von meinem jSON-Datei oder gehen Sie zu https://api.myjson.com/bins/4ky5s

ich versuche, die Hauptansicht, alt-view-1 usw. abrufen aus dem Bilder-Array. Ich habe in der Lage gewesen, die anderen Werte wie Beschreibung und id mit diesem Code

$.getJSON("json.json", function(data){ 
    $.each(data.products, function() { 
    $("#results").append(
    this["id"] + this["description"] 
    ); 
    }); 
}); 

Wenn ich this["images"] tun zu bekommen, ich

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object] 

bekommen Wie kann ich diese Werte bekommen?

Answer 1

ich Ihre JSON ein wenig verändert, so dass die Bilder als ein Objekt (wie ein assoziatives Array) unter dem Produktobjekt gespeichert werden, so ist hier, wo ich mit dem JSON gestartet (Ich habe nur ein Produkt):

var data = { 
    products:[ 
    { 
     description:'Matte black', 
     id:1, 
     images:{ 
     "main-view":'/images/1/mainView.png', 
     "alt-view-1":"/images/1/altView1.png", 
     "alt-view-2":"/images/1/altView2.png", 
     "alt-view-3":"/images/1/altView3.png", 
     "alt-view-4":"/images/1/altView4.png", 
     "alt-view-5":"/images/1/altView5.png" 
     } 
    } 
    ] 
}; 

Mit ihnen in diesem Format, können Sie die jQuery each Funktion verwenden, um die Bilder zu durchlaufen, wobei die Parameter der Schlüsselname und -wert in jeder Funktion sind. Sie können ein Bild Liste von ihnen (oder die Werte verwenden, aber) durch Schleifen und mit k und v bauen ihre Schlüssel und Wert drucken beziehungsweise:

1 
Matte black 
main-view = /images/1/mainView.png 
alt-view-1 = /images/1/altView1.png 
alt-view-2 = /images/1/altView2.png 
alt-view-3 = /images/1/altView3.png 
alt-view-4 = /images/1/altView4.png 
alt-view-5 = /images/1/altView5.png 

:

$.each(data.products, function(){ 

    var imageList = $("<div>").addClass("image-list"); 

    $.each(this.images, function(k, v){ 
    imageList.append(
     $("<div>").addClass('image').append(
     $("<span>").addClass('image-name').append(k + " = "), 
     $("<span>").addClass('image-url').append(v) 
    ) 
    ); 
    }); 

    $('#results').append(
    $("<div>").addClass('product').append(
     $("<div>").addClass('product-id').append(this.id), 
     $("<div>").addClass('product-desc').append(this.description), 
     imageList 
    ) 
); 
}); 

Die Ergebnisse wie diese erscheinen sollen

Hier ist ein Fiddle demonstrieren: https://jsfiddle.net/5yc733k4/

Answer 2

Hier ist, wie man dort bekommen kann:

Working Example

var arr = obj.products; 

for (var i = 0; i < arr.length; i++) { 
    var images = arr[i].images; 
    for (var img in images) { 
    console.log(images[img]); 
    } 
} 

Answer 3

this.images [0] ['hauptansicht'] haben den Trick gemacht!