JavaScript 循环嵌套对象并显示在单独的行中

Question

我有如下 JS 对象。

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

我想为每个玩家创建一行，其中包含回合和得分数据。但是，我每轮只能创建一行。玩家显示在同一个单元格中。如何为每个玩家制作单独的行？

我想要显示的内容:

• 1 玩家 1 8
• 2 玩家 2 0
• 2 玩家 3 0
• 3 玩家 4 0
• 4 玩家 5 5
• 4 玩家 6 5
• 4 玩家 7 5

我现在得到的:

• 1 玩家 1 8
• 2 玩家 2 玩家 3 0
• 3 玩家 4 0
• 4 玩家 5 玩家 6 玩家 7 5

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

Answer 1

您需要在内部循环中创建playerRow，例如

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

演示

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>