使用AJAX JSON打印文件

我想使用AJAX來讀取JSON文件，然後打印其元素，例如所有名稱。目前我寫了這個：使用AJAX 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文件AJAX功能：

<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>

但我不能打印的名字，這是我第一次使用JSON文件，這樣我就不會在編寫時犯錯誤，或者我在AJAX函數中犯了錯誤。

來源

2016-12-03 B.Loga

變化'for'環路'VAR輸出= ''; （var index in obj [0]）{ output + =「」+ obj [0] [index] .name; }' –

您的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

如果您稍微修改你的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); 
    }

來源

2016-12-03 16:32:58

看來你想訪問名稱的方式是不同的。

希望這個片段將工作

// 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

來源

2016-12-03 16:34:09 brk

使用AJAX JSON打印文件

回答

相關問題