Iterate json elements in javascript

Question

My .jsonfile is as follows:

{"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"}
  }
}

I want to echo a table, as follows:

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

The number of players in each team is not fixed: it can be 3 or other number.

I am using jquery to refresh the .jsonfile. This is the current (and bad) jquery code. It should be something like this:

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
    }
});

Could anyone tell me how to make this jquery code works and how to print the table in jquery?

you can get some help here: https://stackoverflow.com/questions/1051061/convert-json-array-to-an-html-table-in-jquery — tech2017, Jun 12 '17 at 15:06
Rory McCrossan This is not duplicate, as the first part is how to access to the length of Team1 and Team2 number of players, that is, find out the number for the loop. — Javi, Jun 12 '17 at 15:23

Vashnak · Accepted Answer · 2017-06-12T15:27:55.267

I made a fiddle, say me if it's what you want :)

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>

It works for me, i added a code snippet :) you can run it directly from stackoverflow — Vashnak, Jun 12 '17 at 15:28

score 0 · Answer 2 · answered Jun 12 '17 at 15:09

0

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

Something like that should work

answered Jun 12 '17 at 15:09

vZ10

2,468
2
23
33

score 0 · Answer 3 · answered Jun 12 '17 at 15:15

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;

You could iterate with two loops and build up the html...

Iterate json elements in javascript

3 Answers3