javascript - 在 javascript 中迭代 json 元素

Question

我的.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刷新.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 中打印表格？

Answer 1

我做了一个 fiddle ，如果这是你想要的，请告诉我:)

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>