如何加载动态的 JSON 数组？

Question

为什么这个 JSON 不起作用？我正在尝试循环所有 gallery 数组 large 项目。我将来可能会将它们附加到 table 或其他东西中，但我什至不能 console.log 这些值。我试过使用键值，但没有运气！最重要的是，下面的画廊 JSON 具有 204473、204474 等值，这些是动态的，因此我认为我需要将它们视为密钥？

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);

所以我通过 $.post 得到我的 JSON，returns 很好。这是示例 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"
        }
    }
}

Answer 1

您必须将处理逻辑修改为：

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);
    }
}

我所做的只是去掉外部 for ... in 并重命名一些变量，使其更清晰。

根据你最初的问题，你希望你的数据在一个数组中，但它不是。

所以如果你修改了第二行，那也会解决它，虽然上面的答案更干净，我不会在数组中做 for ... in，尤其是只有一个元素的数组:

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);
            }
        }
    }
}

如何加载动态的 JSON 数组？

How to load a JSON array which is dynamic?

javascript

json

key