迭代JSON元素在JavaScript

我.json文件如下：迭代JSON元素在JavaScript

{"Team1": 
{ 
    "Player1": {"minutes":"11:35", "tsr":"25.0"}, 
    "Player2":{"minutes":"24:44", "tsr":"53.8"}, 
    "Player3":{"minutes":"14:22", "tsr":"35.7"} 
    }, 
"Team2": 
    { 
    "PlayerX":{"minutes":"27:06", "tsr":"12.5"}, 
    "PlayerY":{"minutes":"04:54", "tsr":"27.8"}, 
    "PlayerZ":{"minutes":"03:21", "tsr":"33.7"} 
    } 
}

我想呼应的表，如下所示：

<table> 
    <tr><td colspan='3'>Team1</td></tr> 
    <tr> 
    <td>Player1</td> 
    <td>11:35</td> 
    <td>25.0</td> 
    </tr> 
    <tr> 
    <td>Player2</td> 
    <td>24:44</td> 
    <td>53.8</td> 
    </tr> 
    <tr> 
    <td>Player3</td> 
    <td>14:22</td> 
    <td>35.7</td> 
    </tr> 
    <tr><td colspan='3'>Team2</td></tr> 
    <tr> 
    <td>PlayerX</td> 
    <td>27:06</td> 
    <td>12.5</td> 
    </tr> 
    <tr> 
    <td>PlayerY</td> 
    <td>04:54</td> 
    <td>27.8</td> 
    </tr> 
    <tr> 
    <td>PlayerZ</td> 
    <td>03:21</td> 
    <td>33.7</td> 
    </tr> 
    </table>

玩家在每队的号码是不固定的：它可以是3或其他数字。

我正在使用jquery刷新.json文件。这是当前（和糟糕的）jQuery代码。它应该是这样的：

var pdatafile = "json/pdata.json"; 
$.getJSON(pdatafile, function (pjson) { 
    for (i = 0; i < pjson.Team1.length; ++i) { 
     // Code 
    } 
    for (i = 0; i < pjson.Team2.length; ++i) { 
     // Code 
    } 
});

谁能告诉我如何使这个jQuery代码工作以及如何打印表格中的jQuery？

来源

2017-06-12 Javi

你可以在这里得到一些帮助：https://stackoverflow.com/questions/1051061/convert-json-array-to-an-html- table-in-jquery – tech2017

Rory McCrossan这不是重复的，因为第一部分是如何访问Team1和Team2数量的玩家的长度，也就是找出循环的数量。 – Javi

我做了一个小提琴，说我，如果这是你想要什么:)

https://fiddle.jshell.net/ydwf5hks/1/

let myJson = { 
 
"Team1": 
 
{ 
 
    "Player1": {"minutes":"11:35", "tsr":"25.0"}, 
 
    "Player2":{"minutes":"24:44", "tsr":"53.8"}, 
 
    "Player3":{"minutes":"14:22", "tsr":"35.7"} 
 
    }, 
 
"Team2": 
 
    { 
 
    "PlayerX":{"minutes":"27:06", "tsr":"12.5"}, 
 
    "PlayerY":{"minutes":"04:54", "tsr":"27.8"}, 
 
    "PlayerZ":{"minutes":"03:21", "tsr":"33.7"} 
 
    } 
 
} 
 

 
let html = []; 
 
for(let team in myJson){ 
 
\t let teamName = team; 
 
\t html.push('<table>'); 
 
    html.push('<tr><td colspan="3">' + teamName + '</td></tr>') 
 
    for(let player in myJson[team]){ 
 
    \t let playerName = player; 
 
    html.push('<tr><td>' + playerName + '</td><td>' + myJson[team][player].minutes + '</td><td>' + myJson[team][player].tsr + '</td></tr>'); 
 
    } 
 
\t html.push('</table>'); 
 
} 
 

 
document.getElementById('content').innerHTML = html.join('');

<div id="content"> 
 
    
 
</div>

来源

2017-06-12 15:12:06 Vashnak

我看不到小提琴。对你起作用吗？ – Javi

它适用于我，我添加了一个代码片段:)你可以直接从stackoverflow运行它 – Vashnak

太棒了！非常感谢！ – Javi

for (i = 0; i < Object.keys(pjson.Team1).length; ++i) { 
     do_something(pjson.Team1[Object.keys(pjson.Team1)]); 
    }

类似的东西应该工作

来源

2017-06-12 15:09:27 vZ10

var output=""; 
for(teamname in pjson){ 
    var team=pjson[teamname]; 
    output+=" <tr><td colspan='3'>"+teamname+"</td></tr>"; 
    for(playername in team){ 
    player=team[playername]; 
    output+="<tr><td>"+playername+"</td><td>"+player.tsr+"</td><td>"+player.minutes+"</td></tr>"; 
    } 
} 
document.body.innerHTML=output;

你可以迭代两个循环，并建立html ...

来源

2017-06-12 15:15:11

迭代JSON元素在JavaScript

回答

相关问题