javascript - 如何加载动态的 JSON 数组？

Question

为什么这个 JSON 不起作用？我正在尝试循环所有画廊数组大项目。我将来可能会将它们附加到表或其他内容中，但我什至无法 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，它返回正常。这是示例 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);
            }
        }
    }
}