JavaScript loop through nested objects and display in a separate row

Question

I have JS objects as below.

var round=[        
       {
          "round":"1",
          "score":"8",
          "players":[

             {
                "id":"28259",
                "name":"Player 1"
             }
          ]
       },
       {
          "round":"2",
          "score":"0",
          "players":[

             {
                "id":"",
                "name":"Player 2"
             },
             {
                "id":"1887",
                "name":"Player 3"
             }
          ]
       },
       {
          "round":"3",
          "score":"0",
          "players":[

             {
                "id":"26300",
                "name":"Player 4"
             }
          ]
       },
       {
          "round":"4",
          "score":"5",
          "players":[

             {
                "id":"22792",
                "name":"Player 5"
             },

             {
                "id":"23135",
                "name":"Player 8"
             },
             {
                "id":"28259",
                "name":"Player 9"
             }
          ]
       }
    ]

I want to create a row per a player with round and score data. However, I can only create one row per a round. Players are displayed in the same cell. How can I make a separate row per a player?

What I want to display:

1 Player 1 8
2 Player 2 0
2 Player 3 0
3 Player 4 0
4 Player 5 5
4 Player 6 5
4 Player 7 5

What I am getting now:

1 Player 1 8
2 Player 2 Player 3 0
3 Player 4 0
4 Player 5 Player 6 Player 7 5

Here is JS Fiddle - http://jsfiddle.net/sunflowersh/8gm96vts/2/

JavaScript:

function write_round_players(){
$('#tableData').html('');
$.each(round, function(index,value){

var round_row = '';

round_row+='<div class="playerRow">';
round_row+='  <div class="round">'+this.round+'</div>';
round_row+='  <div class="player">';

var round_players = this.players;

$.each(round_players, function(index,value){
  if(this.id != ""){
    round_row+='<a href="/player_'+this.id+'.html">'+this.name+'</a>';
  } else {
    round_row+=this.name;
  }
});

round_row+='  </div>';
round_row+='  <div class="score">'+this.score+'</div>';
round_row+='</div>';

$('#tableData').append(round_row);
});
}

Arun P Johny · Accepted Answer · 2015-01-21 05:15:38Z

You need to create the playerRow in the inside loop like

function write_round_players() {

    $('#tableData').html('');

    $.each(round, function (index, value) {

        var round_row = '';


        var round_players = this.players;

        $.each(round_players, function (index, player) {
            round_row += '<div class="playerRow">';
            round_row += '  <div class="round">' + value.round + '</div>';
            round_row += '  <div class="player">';
            if (this.id != "") {
                round_row += '<a href="/player_' + this.id + '.html">' + this.name + '</a>';
            } else {
                round_row += this.name;
            }
            round_row += '  </div>';
            round_row += '  <div class="score">' + value.score + '</div>';
            round_row += '</div>';
        });

        $('#tableData').append(round_row);
    });
}

Demo

var round = [{
  "round": "1",
  "score": "8",
  "players": [

    {
      "id": "28259",
      "name": "Player 1"
    }
  ]
}, {
  "round": "2",
  "score": "0",
  "players": [

    {
      "id": "",
      "name": "Player 2"
    }, {
      "id": "1887",
      "name": "Player 3"
    }
  ]
}, {
  "round": "3",
  "score": "0",
  "players": [

    {
      "id": "26300",
      "name": "Player 4"
    }
  ]
}, {
  "round": "4",
  "score": "5",
  "players": [

    {
      "id": "22792",
      "name": "Player 5"
    },

    {
      "id": "23135",
      "name": "Player 6"
    }, {
      "id": "28259",
      "name": "Player 7"
    }
  ]
}]
write_round_players();

function write_round_players() {

  $('#tableData').html('');

  var playerCount = 0;
  $.each(round, function(index, value) {

    var round_row = '';


    var round_players = this.players;

    playerCount += round_players.length;
    $.each(round_players, function(index, player) {
      round_row += '<div class="playerRow">';
      round_row += '  <div class="round">' + value.round + '</div>';
      round_row += '  <div class="player">';
      if (this.id != "") {
        round_row += '<a href="/player_' + this.id + '.html">' + this.name + '</a>';
      } else {
        round_row += this.name;
      }
      round_row += '  </div>';
      round_row += '  <div class="score">' + value.score + '</div>';
      round_row += '</div>';
    });

    $('#tableData').append(round_row);
    $('#total').html(playerCount);
  });
}

.playerRow {
  width: 100%;
  display: block;
  border: solid 1px #000000;
  overflow: hidden;
}
.player,
.round,
.score {
  float: left;
  padding: 10px;
}
.round {
  width: 22%;
}
.player {
  width: 40%;
}
.score {
  width: 23%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="playerRow">
  <div class="round">Round</div>
  <div class="player">Player</div>
  <div class="score">Score</div>
</div>
<div id="tableData"></div>
<div id="total"></div>

Thanks! This is what I needed. I also want to get the total numbers of players. Is there a way in the loop I can get how many players exist in the JS objects? In my example, there are 11 players.

Scott Sauyet · Accepted Answer · 2015-01-21 05:11:13Z

1

Another approach would be to transform your data into a more helpful structure up front. Something like this might do:

round.reduce(function(acc, r) {
    var base = {round: r.round, score: r.score}; 
    return acc.concat(r.players.map(function(player) {
        return $.extend({}, base, player);
    }));
}, []);

This gives you an array of objects that look like, for instance,

{
   "round":"4",
   "score":"5",
   "id":"22792",
   "name":"Player 5"
},

Then it's a matter of performing a simple loop.

answered Jan 21, 2015 at 5:11

Scott Sauyet

50.9k5 gold badges57 silver badges111 bronze badges

Collectives™ on Stack Overflow

JavaScript loop through nested objects and display in a separate row

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related