Iterate json elements in javascript [duplicate]

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: stackoverflow.com/questions/1051061/… — tech2017
– tech2017, Commented Jun 12, 2017 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
– Javi, Commented Jun 12, 2017 at 15:23

Vashnak · Accepted Answer · 2017-06-12 15:27:55Z

1

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>

edited Jun 12, 2017 at 15:27

answered Jun 12, 2017 at 15:12

Vashnak

3621 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Javi Over a year ago

I can't see the fiddle. Does it work for you?

Vashnak Over a year ago

It works for me, i added a code snippet :) you can run it directly from stackoverflow

vZ10 · Accepted Answer · 2017-06-12 15:09:27Z

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, 2017 at 15:09

vZ10

2,7562 gold badges25 silver badges34 bronze badges

Comments

Jonas Wilms · Accepted Answer · 2017-06-12 15:15:11Z

0

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

answered Jun 12, 2017 at 15:15

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Collectives™ on Stack Overflow

Iterate json elements in javascript [duplicate]

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related