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 Player 2 0
2 Player 3 0
3 Player 4 0
4 Player 5 5
4 Player 6 5
4 Player 7 5

我现在得到的是什么：

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

这是JS小提琴 - 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);
    });
}

演示

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 2

另一种方法是将您的数据转换为更有用的结构。这样的事情可能会这样：

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);
    }));
}, []);

这为您提供了一组对象，例如

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

然后这是一个执行简单循环的问题。

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

2 个答案: