How to load a JSON array which is dynamic?

Question

Why does this JSON not work? I am trying to loop all the gallery array large items. I may append them in future into a table or something but I cannot even console.log the values. I have tried using key, values but no luck! Most important is the fact the gallery JSON below has values like 204473, 204474 these are dynamic so I need to treat them as a key I think?

function changeImages(data){

    // JSON
    var data = data;

    // Loop through all the JSON
    for (var key in data) {
        if (data.hasOwnProperty(key)) {
            // Get the gallery array
            var value = data[key]["gallery"];
            for (var keyI in value){
                // Get the keys
                console.log(value[keyI].large);
            }
        }
    }
}

function onPageLoad(){

    var strProductId = id;

    // POST MAGENTO MAGE API CALL
    jQuery.ajax({
        type: "POST",
        url: "/swatches/ajax/media",
        data: "product_id="+strProductId,
        success: function(data){
            changeImages(data)
        }
    });

}

onPageLoad(64413);

So I get my JSON via $.post which returns fine. This is the sample JSON:

{
    "large": "https:\/\/res-1.xxxx.net\/image\/upload\/dpr_auto,f_auto,q_auto,w_auto\/d_coming-soon.jpg\/media\/catalog\/product\/8\/8\/886535528239_1.jpg",
    "medium": "https:\/\/res-1.xxxx.net\/image\/upload\/dpr_auto,f_auto,q_auto,w_auto\/d_coming-soon.jpg\/media\/catalog\/product\/8\/8\/886535528239_1.jpg",
    "small": "https:\/\/res-1.xxxx.net\/image\/upload\/dpr_auto,f_auto,q_auto,w_auto\/d_coming-soon.jpg\/media\/catalog\/product\/8\/8\/886535528239_1.jpg",
    "gallery": {
        "204472": {
            "large": "https:\/\/res-1.xxxx.net\/image\/upload\/dpr_auto,f_auto,q_auto,w_auto\/d_coming-soon.jpg\/media\/catalog\/product\/8\/8\/886535528239_1.jpg",
            "medium": "https:\/\/res-1.xxxx.net\/image\/upload\/dpr_auto,f_auto,q_auto,w_auto\/d_coming-soon.jpg\/media\/catalog\/product\/8\/8\/886535528239_1.jpg",
            "small": "https:\/\/res-1.xxxx.net\/image\/upload\/dpr_auto,f_auto,q_auto,w_auto\/d_coming-soon.jpg\/media\/catalog\/product\/8\/8\/886535528239_1.jpg"
        },
        "204473": {
            "large": "https:\/\/res-4.xxxx.net\/image\/upload\/dpr_auto,f_auto,q_auto,w_auto\/d_coming-soon.jpg\/media\/catalog\/product\/8\/8\/886535528239_2.jpg",
            "medium": "https:\/\/res-4.xxxx.net\/image\/upload\/dpr_auto,f_auto,q_auto,w_auto\/d_coming-soon.jpg\/media\/catalog\/product\/8\/8\/886535528239_2.jpg",
            "small": "https:\/\/res-4.xxxx.net\/image\/upload\/dpr_auto,f_auto,q_auto,w_auto\/d_coming-soon.jpg\/media\/catalog\/product\/8\/8\/886535528239_2.jpg"
        },
        "204474": {
            "large": "https:\/\/res-5.xxxx.net\/image\/upload\/dpr_auto,f_auto,q_auto,w_auto\/d_coming-soon.jpg\/media\/catalog\/product\/8\/8\/886535528239_3.jpg",
            "medium": "https:\/\/res-5.xxxx.net\/image\/upload\/dpr_auto,f_auto,q_auto,w_auto\/d_coming-soon.jpg\/media\/catalog\/product\/8\/8\/886535528239_3.jpg",
            "small": "https:\/\/res-5.xxxx.net\/image\/upload\/dpr_auto,f_auto,q_auto,w_auto\/d_coming-soon.jpg\/media\/catalog\/product\/8\/8\/886535528239_3.jpg"
        },
        "204475": {
            "large": "https:\/\/res-3.xxxx.net\/image\/upload\/dpr_auto,f_auto,q_auto,w_auto\/d_coming-soon.jpg\/media\/catalog\/product\/8\/8\/886535528239_4.jpg",
            "medium": "https:\/\/res-3.xxxx.net\/image\/upload\/dpr_auto,f_auto,q_auto,w_auto\/d_coming-soon.jpg\/media\/catalog\/product\/8\/8\/886535528239_4.jpg",
            "small": "https:\/\/res-3.xxxx.net\/image\/upload\/dpr_auto,f_auto,q_auto,w_auto\/d_coming-soon.jpg\/media\/catalog\/product\/8\/8\/886535528239_4.jpg"
        },
        "204476": {
            "large": "https:\/\/res-5.xxxx.net\/image\/upload\/dpr_auto,f_auto,q_auto,w_auto\/d_coming-soon.jpg\/media\/catalog\/product\/8\/8\/886535528239_5.jpg",
            "medium": "https:\/\/res-5.xxxx.net\/image\/upload\/dpr_auto,f_auto,q_auto,w_auto\/d_coming-soon.jpg\/media\/catalog\/product\/8\/8\/886535528239_5.jpg",
            "small": "https:\/\/res-5.xxxx.net\/image\/upload\/dpr_auto,f_auto,q_auto,w_auto\/d_coming-soon.jpg\/media\/catalog\/product\/8\/8\/886535528239_5.jpg"
        }
    }
}

valid JSON starts with an object literal. It shouldn't come in the form of an array — Callum Linington, Aug 01 '16 at 08:21
A json can start with an array... http://stackoverflow.com/questions/5034444/can-a-json-start-with — Pierre Inglebert, Aug 01 '16 at 08:39
@PierreInglebert Thanks for that +1 any chance of answering too? — TheBlackBenzKid, Aug 01 '16 at 08:50
I didnt really understood your problem, if the API retrun an object, you have to handle that object, not an array, remove the for in and it should work. — Pierre Inglebert, Aug 01 '16 at 08:54

Arathi Sreekumar · Accepted Answer · 2016-08-01T08:55:38.597

You'll have to modify your processing logic to:

function changeImages(data){
    var gallery = data["gallery"];
    for (var key in gallery){
      // show all the gallery large images and loop through them
      console.log(gallery[key].large);
    }
}

All I did was strip out the outer for ... in and rename a few variables, to make it cleaner.

As per your initial question, you were expecting your data to be in an array but its not.

So if you had modified the second line, that would have solved it too, though above answer is more clean, and I wouldn't do for ... in in an array, especially one which only has one element:

function changeImages(data){

    // JSON
    var data = [data];  //Note: I changed this line

    // Loop through all the JSON
    for (var key in data) {
        if (data.hasOwnProperty(key)) {
            // Get the gallery array
            var value = data[key]["gallery"];
            for (var keyI in value){
                // Get the keys
                console.log(value[keyI].large);
            }
        }
    }
}

How to load a JSON array which is dynamic?

1 Answers1