javascript - Javascript - 循环一个 json 数组并获取带有键和值的项目

Question

已经提出了非常相似的问题，但我找不到我的案例的正确答案。

我试图读取一个 json 数组并将其作为带有按钮的列表输出。

杰森：

xyData = {
"animals": {
"0": [{"name": "Cat", "color": -1, "height": 1}, {"name": "Bear", "color": 0, "height": 2}],
"1": [{"name": "Cow", "color": -1, "height": 2}],
"2": [{"name": "Dog", "color": -1, "height": 1}],
"6": [{"name": "Shark", "color": -1, "height": 1}],
"7": [{"name": "Wale", "color": -1, "height": 4}]
},

"peoples": {
"1": [{"name": "Markus", "color": 0, "height": 2}, {"name": "Josef", "color": 0, "height": 2}],
"3": [{"name": "Liz", "color": 1, "height": 2}],
"4": [{"name": "Jake", "color": 0, "height": 2}],
"5": [{"name": "Gunther", "color": 0, "height": 2}],
"6": [{"name": "Rachel", "color": 1, "height": 2}],
"7": [{"name": "George", "color": 0, "height": 2}],
"8": [{"name": "Sarah", "color": 1, "height": 2}, {"name": "Karina", "color": 1, "height": 2}],
"9": [{"name": "Jack", "color": 0, "height": 2}],
"11": [{"name": "Donald", "color": 0, "height": 2}, {"name": "July", "color": 1, "height": 2}]
}    
}

最后我想要一个具有如下属性的按钮列表：

<input type="button" onClick="showAnimal(id, name,color,height);" value="'+name+'">

<input type="button" onClick="showPeople(id, name,color,height);" value="'+name+'">

我的方法是这样的：

function Start(wData) {

document.getElementById("animalsTitle").innerHTML = "";
document.getElementById("animals").innerHTML = "";
document.getElementById("peoplesTitle").innerHTML = "";
document.getElementById("peoples").innerHTML = "";

var Data = JSON.parse(wData);

        Object.entries(Data).forEach(([key, value]) => {
           //console.log(`${key} `);
           if (key == "animals") {
              document.getElementById("animalsTitle").innerHTML += "<br>"+key+"";

              Object.entries(value).forEach(([key, value]) => {
                 //console.log(`${key} `);
                 var animalKey = key;
                 document.getElementById("animals").innerHTML += "<br>Items: "+key+"";

                 Object.entries(value).forEach(([key, value]) => {
                    //console.log(`${key} `);

                    Object.entries(value).forEach(([key, value]) => {
                    //console.log(`${key} ${value} `);


                       if (key === "name") {
                          var nameValue = value;
                       }
                       if (key === "color") {
                          var colorValue = value;
                       }
                       if (key === "height") {
                          var heightValue = value;
                       }

                       if (key === "name") {
                          document.getElementById("animals").innerHTML += '<br><input type="button" onClick="showAnimal(\''+animalKey+'\',\''+colorValue+'\',\''+heightValue+'\');" value="'+nameValue+'">';
                       }

                    });

                 });

              });


           } else {
              var itemPeopleTitleName;
              document.getElementById("peoplesTitle").innerHTML += "<br>"+key+"";

              Object.entries(value).forEach(([key, value]) => {
                 //console.log(`${key} `);

                 var PeopleKey = key;
                 document.getElementById("peoples").innerHTML += "<br>Items: "+key+"";

                 Object.entries(value).forEach(([key, value]) => {
                    //console.log(`${key} `);


                    Object.entries(value).forEach(([key, value]) => {
                       //console.log(`${key} ${value} `);

                       if (key == "name") {
                          document.getElementById("peoples").innerHTML += '<br><input type="button" onClick="showPeople(\''+PeopleKey+'\',\''+key+'\',\''+value+'\');" value="'+value+'">';
                       }

                    });

                 });

              });

           }

        });
}
Start(JSON.stringify(xyData));

用一点HTML：

<div id="animalsTitle"></div>
<div id="animals"></div>
<div id="peoplesTitle"></div>
<div id="peoples"></div>

希望有人可以帮助我，这不是太混乱，我认为它有点过分了？！:)

标签： javascriptarraysjson

Answer 1

解决了。

function Start(wData) {

    document.getElementById("animalsTitle").innerHTML = "";
    document.getElementById("animals").innerHTML = "";
    document.getElementById("peoplesTitle").innerHTML = "";
    document.getElementById("peoples").innerHTML = "";

    var Data = JSON.parse(wData);

    Object.entries(Data).forEach(([key, value]) => {
        //console.log(`${key} `);
        if (key == "animals") {
            document.getElementById("animalsTitle").innerHTML += "<br>" + key + "";

            Object.entries(value).forEach(([key, value]) => {
                //console.log(`${key} `);
                var animalKey = key;
                document.getElementById("animals").innerHTML += "<br>Items: " + key + "";

                Object.entries(value).forEach(([key, value]) => {
                    //console.log(`${key} `);

                    var itemKey = key;
                    document.getElementById("animals").innerHTML += '<input type="button" onClick="showAnimal(\'' + animalKey + '\',\'' + Data.animals[animalKey][itemKey].color + '\',\'' + Data.animals[animalKey][itemKey].height + '\');" value=\'' + Data.animals[animalKey][itemKey].name + '\'>';


                });

            });


        } else {
            var itemPeopleTitleName;
            document.getElementById("peoplesTitle").innerHTML += "<br>" + key + "";

            Object.entries(value).forEach(([key, value]) => {
                //console.log(`${key} `);

                var PeopleKey = key;
                document.getElementById("peoples").innerHTML += "<br>Items: " + key + "";

                Object.entries(value).forEach(([key, value]) => {
                    //console.log(`${key} `);

                    var itemPKey = key;
                    document.getElementById("peoples").innerHTML += '<input type="button" onClick="showAnimal(\'' + PeopleKey + '\',\'' + Data.peoples[PeopleKey][itemPKey].color + '\',\'' + Data.peoples[PeopleKey][itemPKey].height + '\');" value=\'' + Data.peoples[PeopleKey][itemPKey].name + '\'>';



                });

            });

        }

    });
}

对我来说，这很完美！