如何声明一个 JSON 并遍历它？

Question

我的 JSON 包含三个数组对象的集合。其中每个数组本身是三个其他对象的集合，总共有九个对象。 这是我的 JSON：

{
           "image1" :  [{
                "id": "table",
                "source": "http://test.reinventio.tk/office-space-game-3/images/table.jpg",
                "alert": [],
                "explanation": "Tables are needed for maintaining a good posture and consequently, \n good health - an entrepreneur cant function with a perpetually aching \n back now, can he?"           
            }, {
                "id": "computer",
                "source": "http://test.reinventio.tk/office-space-game-3/images/computer.jpg",
                "alert": [],
                "explanation": "Whats work without a computer?"
            }, {
                "id": "ac",
                "source": "http://test.reinventio.tk/office-space-game-3/images/ac.jpg",
                "alert": [],
                "explanation": "Air cons are luxuries. Besides, \nas an entrepreneur, \nyoure supposed to be sweating it out!"
            }],

            "image2" :  [{
                "id": "sofa",
                "source": "http://test.reinventio.tk/office-space-game-3/images/sofa.jpg",
                "alert": [],
                "explanation": "Sofas are a luxury. Besides, \nstartups are all but cozy and cusiony, like a sofa!"

            }, {
                "id": "xbox",
                "source": "http://test.reinventio.tk/office-space-game-3/images/xbox.jpg",
                "alert": [],
                "explanation": "Gaming in the office space is a strict no-no.\n For an entrepreneur, work itself is play!"
            }, {
                "id": "whiteboard",
                "source": "http://test.reinventio.tk/office-space-game-3/images/whiteboard.jpg",
                "alert": [],
                "explanation": "Wall emulsion paint turns all your walls\n into gigantic whiteboards. So why waste money \non a small one?"
            }],

            "image3" : [{
                "id": "pool",
                "source": "http://test.reinventio.tk/office-space-game-3/images/pooltable.jpg",
                "alert": [],
                "explanation": "Pool-dreams are to be dreamt after your startup grows."
            }, {
                "id": "green",
                "source": "http://test.reinventio.tk/office-space-game-3/images/inofficeplant.jpg",
                "alert": [],
                "explanation": "Landscaping in the office?\n Lifes not a golf course - especially \nfor a startup."
            }, {
                "id": "paper",
                "source": "http://test.reinventio.tk/office-space-game-3/images/paper.jpg",
                "alert": [],
                "explanation": "Be a jugaadu and improvise to save costs \n- why would you want to buy paper when you can use the empty side\n of election pamphlets?"
            }]

}

现在我想访问每个图像对象的来源和 id，例如“table”或“ac”。问题是它给图像对象i。

这是我的 JavaScript 代码：

for(var rowCtr in a.imageTable){
                var obj=rowCtr;
                for(var colCtr =0;colCtr<obj.length;colCtr++){

                    var imageObject = obj[colCtr];

imageTable 是 JSON。

Answer 1

当您使用for (variable in object) 时，它会将variable 设置为对象的键，而不是值。要访问这些值，您必须使用object[variable]。所以在你的情况下，它应该是：

for (var rowCtr in a.imageTable) {
    var obj = a.imageTable[rowCtr];

Answer 2

如果变量 imageTable 引用了所发布的 json，您将使用 id 遍历包含对象的数组，如下所示：

var array = imageTable.image1; // or image2, image3
for(var i=0;i<array.length;i++){
    console.log(array[i].id); //  wil output table, computer, ac
}

var imageTable = {
           "image1" :  [{
                "id": "table",
                "source": "http://test.reinventio.tk/office-space-game-3/images/table.jpg",
                "alert": [],
                "explanation": "Tables are needed for maintaining a good posture and consequently, \n good health - an entrepreneur cant function with a perpetually aching \n back now, can he?"           
            }, {
                "id": "computer",
                "source": "http://test.reinventio.tk/office-space-game-3/images/computer.jpg",
                "alert": [],
                "explanation": "Whats work without a computer?"
            }, {
                "id": "ac",
                "source": "http://test.reinventio.tk/office-space-game-3/images/ac.jpg",
                "alert": [],
                "explanation": "Air cons are luxuries. Besides, \nas an entrepreneur, \nyoure supposed to be sweating it out!"
            }],

            "image2" :  [{
                "id": "sofa",
                "source": "http://test.reinventio.tk/office-space-game-3/images/sofa.jpg",
                "alert": [],
                "explanation": "Sofas are a luxury. Besides, \nstartups are all but cozy and cusiony, like a sofa!"

            }, {
                "id": "xbox",
                "source": "http://test.reinventio.tk/office-space-game-3/images/xbox.jpg",
                "alert": [],
                "explanation": "Gaming in the office space is a strict no-no.\n For an entrepreneur, work itself is play!"
            }, {
                "id": "whiteboard",
                "source": "http://test.reinventio.tk/office-space-game-3/images/whiteboard.jpg",
                "alert": [],
                "explanation": "Wall emulsion paint turns all your walls\n into gigantic whiteboards. So why waste money \non a small one?"
            }],

            "image3" : [{
                "id": "pool",
                "source": "http://test.reinventio.tk/office-space-game-3/images/pooltable.jpg",
                "alert": [],
                "explanation": "Pool-dreams are to be dreamt after your startup grows."
            }, {
                "id": "green",
                "source": "http://test.reinventio.tk/office-space-game-3/images/inofficeplant.jpg",
                "alert": [],
                "explanation": "Landscaping in the office?\n Lifes not a golf course - especially \nfor a startup."
            }, {
                "id": "paper",
                "source": "http://test.reinventio.tk/office-space-game-3/images/paper.jpg",
                "alert": [],
                "explanation": "Be a jugaadu and improvise to save costs \n- why would you want to buy paper when you can use the empty side\n of election pamphlets?"
            }]

};

var array = imageTable.image1; // or image2, image3
for(var i=0;i<array.length;i++){
    console.log(array[i].id); //  wil output table, computer, ac
}

您可以扩展它以使用嵌套循环遍历所有 imageX 对象

var keys = Object.keys(imageTable);
for(var i=0;i<keys.length;i++){
    var array = imageTable[keys[i]];
    for(var j=0;j<array.length;j++){
        console.log(array[j].id); //  wil output table, computer, ac, sofa, xbox etc
    }
}

var imageTable = {
           "image1" :  [{
                "id": "table",
                "source": "http://test.reinventio.tk/office-space-game-3/images/table.jpg",
                "alert": [],
                "explanation": "Tables are needed for maintaining a good posture and consequently, \n good health - an entrepreneur cant function with a perpetually aching \n back now, can he?"           
            }, {
                "id": "computer",
                "source": "http://test.reinventio.tk/office-space-game-3/images/computer.jpg",
                "alert": [],
                "explanation": "Whats work without a computer?"
            }, {
                "id": "ac",
                "source": "http://test.reinventio.tk/office-space-game-3/images/ac.jpg",
                "alert": [],
                "explanation": "Air cons are luxuries. Besides, \nas an entrepreneur, \nyoure supposed to be sweating it out!"
            }],

            "image2" :  [{
                "id": "sofa",
                "source": "http://test.reinventio.tk/office-space-game-3/images/sofa.jpg",
                "alert": [],
                "explanation": "Sofas are a luxury. Besides, \nstartups are all but cozy and cusiony, like a sofa!"

            }, {
                "id": "xbox",
                "source": "http://test.reinventio.tk/office-space-game-3/images/xbox.jpg",
                "alert": [],
                "explanation": "Gaming in the office space is a strict no-no.\n For an entrepreneur, work itself is play!"
            }, {
                "id": "whiteboard",
                "source": "http://test.reinventio.tk/office-space-game-3/images/whiteboard.jpg",
                "alert": [],
                "explanation": "Wall emulsion paint turns all your walls\n into gigantic whiteboards. So why waste money \non a small one?"
            }],

            "image3" : [{
                "id": "pool",
                "source": "http://test.reinventio.tk/office-space-game-3/images/pooltable.jpg",
                "alert": [],
                "explanation": "Pool-dreams are to be dreamt after your startup grows."
            }, {
                "id": "green",
                "source": "http://test.reinventio.tk/office-space-game-3/images/inofficeplant.jpg",
                "alert": [],
                "explanation": "Landscaping in the office?\n Lifes not a golf course - especially \nfor a startup."
            }, {
                "id": "paper",
                "source": "http://test.reinventio.tk/office-space-game-3/images/paper.jpg",
                "alert": [],
                "explanation": "Be a jugaadu and improvise to save costs \n- why would you want to buy paper when you can use the empty side\n of election pamphlets?"
            }]

};

var keys = Object.keys(imageTable);
for(var i=0;i<keys.length;i++){
    var array = imageTable[keys[i]];
    for(var j=0;j<array.length;j++){
        console.log(array[j].id); //  wil output table, computer, ac, sofa, xbox etc
    }
}

Answer 3

这样就可以访问到每张图片的id和来源

var id = []; 
var src= [];
for (var rowCtr in a.imageTable) {
        id= a.imageTable[rowCtr].id;
        src= a.imageTable[rowCtr].source;
}