JavaScript 循环访问嵌套对象并显示在单独的行中
JavaScript loop through nested objects and display in a separate row
我有如下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小提琴 - 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);
});
}
您需要在内部循环中创建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>
另一种方法是预先将数据转换为更有用的结构。 像这样的事情可能会做:
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或jQuery单独识别每个选择选项,并在DIV中显示
- 显示单独数组中两个数组的相同元素
- 如何获得添加多个文本框'使用jQuery在另一个单独的文本框中显示s值
- 单击时将嵌套数组/对象值显示到单独的元素中
- 如何用图形填充流星集合并单独显示它们
- JavaScript 循环访问嵌套对象并显示在单独的行中
- 根据单独选择的选项显示 HTML 选项
- 在 CSS 中有一个单独的伪选择器,以显示有关一行中多个元素的信息
- 拉斐尔JS - 悬停 - 显示/隐藏单独的 DIV
- 如何以大写字母单独显示下拉列表的选定值
- 在数组中显示特定的对象值,而不是单独显示
- 如何在信息框中单独显示标记信息
- 扩展时钟组件的角度指令以单独显示日期时间元素
- 如何使用JQuery DatePicker或angularJS单独显示星期几
- 单独显示JS数组中的每个项目
- adobe livecycle消息框单独显示,而不是在单个框中
- 如何使用javascript在输出中单独显示列表项
- 单独显示json_encode结果
- Angular单独显示和隐藏JSON对象
- 是否有可能屏蔽/隐藏冗长的URL,只是单独显示域名