如何在Jquery中迭代JSON数组

How to iterate JSON Array in Jquery

本文关键字:迭代 JSON 数组 Jquery      更新时间:2023-09-26

我有以下类型的数组。我想在JavaScript中迭代这个数组。这怎么可能?

{
"result": true,
"data": [
{
    "ID": 1,
    "stage_ID": 1,
    "badge_type_ID": 1,
    "name": "Despertar da Força",
    "description": "Fazer a primeira SuperAtividade",
    "type": "",
    "image_static": "url123.jpg",
    "image_animated": "",
    "SQL": "",
    "published": 1
},
{
    "ID": 2,
    "stage_ID": 1,
    "badge_type_ID": 1,
    "name": "Super 3",
    "description": "Fazer 3 SuperAtividades",
    "type": "",
    "image_static": "urlimage123.png",
    "image_animated": "",
    "SQL": "",
    "published": 1
}

etc

我尝试了下面的脚本,它返回"undefined","undefine"。

$.getJSON('https://www.legiaodossuperpoderes.com.br/chronus/api/adm/badges', function(data) {
        var output= "<ol>";
        for (var i in data) {
            output += "<li>" + data[i].ID + "</li>"
        }
        output+="</ol>";
        document.getElementById("placeholder").innerHTML=output;
    }); 

有什么解决方案吗?谢谢

您可以尝试转换为Json Object

$.getJSON('https://www.legiaodossuperpoderes.com.br/chronus/api/adm/badges', function(data) {
        var output= "<ol>";
        var jsondata = $.JSON.parse(data); // Json object Convertion
        for (var i in data) {
            output += "<li>" + data[i].ID + "</li>"
        }
        output+="</ol>";
        document.getElementById("placeholder").innerHTML=output;
    });

您正试图使用data[i].ID.访问未定义的属性

当您从getJSON()函数获得响应时,您需要使用名称调用响应,然后您可以使用此名称访问任何内部属性。

现在,如果您想在myResponse变量上使用datakey/value进行迭代,那么您需要这样做。

$.getJSON('https://www.legiaodossuperpoderes.com.br/chronus/api/adm/badges', function(myResponse) {
    var output= "<ol>";
    var dataCount = myResponse.data.length;
    for (var i = 0; i < dataCount; i++) {
        output += "<li>" + myResponse.data[i].ID + "</li>";
    }
    output+="</ol>";
    document.getElementById("placeholder").innerHTML=output;
});