使用AJAX JSON打印文件

I wanted to use AJAX to read a JSON file, then print its elements for example all the names. For the moment I wrote this:

我想使用AJAX读取JSON文件，然后打印其元素，例如所有名称。目前我写了这个：

File JSON:

文件JSON：

[{
    "JarvanIV": {
        "id": 59,
        "title": "the Exemplar of Demacia",
        "stats": {
            "attackrange": 175,
            "mpperlevel": 40,
            "mp": 302.2,
            "attackdamage": 55.712,
            "hp": 571.2,
            "hpperlevel": 90,
            "attackdamageperlevel": 3.4,
            "armor": 29,
            "mpregenperlevel": 0.45,
            "hpregen": 8.175,
            "critperlevel": 0,
            "spellblockperlevel": 1.25,
            "mpregen": 6.755,
            "attackspeedperlevel": 2.5,
            "spellblock": 32.1,
            "movespeed": 340,
            "attackspeedoffset": -0.05,
            "crit": 0,
            "hpregenperlevel": 0.7,
            "armorperlevel": 3.6
        },
        "name": "Jarvan IV",
        "key": "JarvanIV"
    },
    "Ezreal": {
        "id": 81,
        "title": "the Prodigal Explorer",
        "stats": {
            "attackrange": 550,
            "mpperlevel": 42,
            "mp": 360.6,
            "attackdamage": 55.66,
            "hp": 484.4,
            "hpperlevel": 80,
            "attackdamageperlevel": 2.41,
            "armor": 21.88,
            "mpregenperlevel": 0.65,
            "hpregen": 6.42,
            "critperlevel": 0,
            "spellblockperlevel": 0,
            "mpregen": 8.09,
            "attackspeedperlevel": 2.8,
            "spellblock": 30,
            "movespeed": 325,
            "attackspeedoffset": 0,
            "crit": 0,
            "hpregenperlevel": 0.55,
            "armorperlevel": 3.5
        },
        "name": "Ezreal",
        "key": "Ezreal"
    }
}]

HTML file with AJAX function:

具有AJAX功能的HTML文件：

<body>
    <div id="champion"></div>
    <script>
        var request = new XMLHttpRequest();

        request.open('GET', 'champStat.json');
        request.onreadystatechange = function() {
            if ((request.readyState === 4) && (request.status === 200)) {
                var obj = JSON.parse(request.responseText);
                var output;
                for (var index in obj) {
                    output += "" + obj[index].name;
                }
                var doc = document.getElementById("champion");
                doc.innerHTML = output;
            }
        }
        request.send();
    </script>
</body>

But I can't print the name, it is the first time I use a JSON file so I would not have made mistakes in writing, or I was wrong in the AJAX function.

但是我不能打印这个名字，这是我第一次使用JSON文件，所以我不会在写作中犯错，或者我在AJAX函数中错了。

2 个解决方案

#1

Your JSON has a weird structure, as the nested object has a key that redundantly carries the name (and key) you have in the next structure.

您的JSON具有奇怪的结构，因为嵌套对象具有冗余地携带您在下一个结构中具有的名称（和键）的键。

But apart from that, this will work (I left out the AJAX part as this is probably not your problem, and put the parsed object in json):

但除此之外，这将工作（我省略了AJAX部分，因为这可能不是你的问题，并将解析的对象放在json中）：

    var output;
    for(var i = 0; i < json.length; i++){
        obj = json[i];
        for (var char in obj) {
          output += obj[char].name;
          console.log(obj[char].name);
        }
    }

JSFiddle

的jsfiddle

If you modify your JSON structure a bit, you can do it a lot easier:

如果稍微修改JSON结构，可以更轻松地完成：

var json = [
       {
         "id": 59,
         "title": "the Exemplar of Demacia",
         "stats": {
            "attackrange": 175,
            "mpperlevel": 40,
            "mp": 302.2,
            "attackdamage": 55.712,
            "hp": 571.2,
            "hpperlevel": 90,
            "attackdamageperlevel": 3.4,
            "armor": 29,
            "mpregenperlevel": 0.45,
            "hpregen": 8.175,
            "critperlevel": 0,
            "spellblockperlevel": 1.25,
            "mpregen": 6.755,
            "attackspeedperlevel": 2.5,
            "spellblock": 32.1,
            "movespeed": 340,
            "attackspeedoffset": -0.05,
            "crit": 0,
            "hpregenperlevel": 0.7,
            "armorperlevel": 3.6
         },
         "name": "Jarvan IV",
         "key": "JarvanIV"
      },
      {
         "id": 81,
         "title": "the Prodigal Explorer",
         "stats": {
            "attackrange": 550,
            "mpperlevel": 42,
            "mp": 360.6,
            "attackdamage": 55.66,
            "hp": 484.4,
            "hpperlevel": 80,
            "attackdamageperlevel": 2.41,
            "armor": 21.88,
            "mpregenperlevel": 0.65,
            "hpregen": 6.42,
            "critperlevel": 0,
            "spellblockperlevel": 0,
            "mpregen": 8.09,
            "attackspeedperlevel": 2.8,
            "spellblock": 30,
            "movespeed": 325,
            "attackspeedoffset": 0,
            "crit": 0,
            "hpregenperlevel": 0.55,
            "armorperlevel": 3.5
         },
         "name": "Ezreal",
         "key": "Ezreal"
      }
];

  var output;
  for(var i = 0; i < json.length; i++){
    obj = json[i];
    output += obj.name;
    console.log(obj.name);
  }

#2

It seems the way you want to access the name is different.

看来你想要访问这个名字的方式是不同的。

Hope this snippet will work

希望这个片段能够奏效

 // need to get the first object
    var getObj = obj[0];
   // it will return the keys example ezreal,jaravan
    var getKeys = Object.keys(getObj);
    // now loop over getObj, and access each object and retrieve the name
    getKeys.forEach(function(item){
      console.log(getObj[item].name);

    })

DEMO

DEMO

#1