在javascript中迭代json元素[重复]答案

【问题标题】：Iterate json elements in javascript [duplicate]在javascript中迭代json元素[重复]
【发布时间】：2017-09-21 16:12:33
【问题描述】：

我的.json文件如下：

{"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 来刷新 .jsonfile。这是当前（和坏的）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 中打印表格？

【问题讨论】：

你可以在这里获得帮助：stackoverflow.com/questions/1051061/…
Rory McCrossan 这不是重复的，因为第一部分是如何获取Team1的长度和Team2的玩家人数，即找出循环的人数。

标签： javascript jquery json

【解决方案1】：

我做了一个小提琴，如果你想要的话，告诉我:)

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

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

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

【讨论】：

我看不到小提琴。它对你有用吗？
它对我有用，我添加了一个代码 sn-p :) 你可以直接从 stackoverflow 运行它
太棒了！非常感谢！
不客气 :)

【解决方案2】：

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

类似的东西应该可以工作

【讨论】：

【解决方案3】：

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

【讨论】：