我试图根据matchday属性将此数据http://www.football-data.org//soccerseasons/354/fixtures中的灯具放入单独的div中。我不知道怎么做。我已经使用过Underscore的groupBy,但不知道如何动态地将数据放入剩余的比赛日生成的单独div中。有人可以帮忙吗?
getRemainingFixtures = function(){
$.ajax({
type: 'get',
url: '/fixtures/later_fixtures',
dataType: 'json'
}).done(function(data){
data = _.groupBy(data,'matchday');
console.log(data);
$.each(data, function(index, value) {
$.each(value, function(index, game) {
$('#fixtures').append('<p> <button style="width: 50px;text-overflow: ellipsis;white-space: normal;height: 40px;">Down Score</button> ' + game.homeTeam + ' <button style="width: 50px;text-overflow: ellipsis;white-space: normal;height: 40px;">Up Score</button> V <button style="width: 50px;text-overflow: ellipsis;white-space: normal;height: 40px;">Down Score</button> ' + game.awayTeam + ' <button style="width: 50px;text-overflow: ellipsis;white-space: normal;height: 40px;">Up Score</button></p>');
$('#fixtures').css({
'max-width': '80%',
'display': 'inline-block',
'text-overflow': 'ellipsis',
'white-space': 'nowrap',
'float': 'left',
'border': 'black 1px solid'
});
})
})
});
}
答案 0 :(得分:1)
像这样的东西
$.ajax({
type: 'get',
url: 'http://jsbin.com/zinefu/1.json',
dataType: 'json'
}).done(function(data){
data = _.groupBy(data,'matchday');
$.each(data, function(index, day){
var matchdatediv = $('<div>');
var h1 = $('<h1>').html(day[0].matchday);
matchdatediv.append(h1);
$.each(day,function(index2, game){
var div = $('<div>');
var h4 = $('<h4>').html(game.homeTeam);
div.append(h4);
matchdatediv.append(div);
});
$('#fixtures').append(matchdatediv);
});
});
我遍历数据并创建了一个如何遍历每个游戏对象的示例。
您在演示中看到的结构就像这样
<div>
<h1>match date 1
<div>
<div>
<h4>home team for game 1</h4>
</div>
</div>
<div>
<div>
<h4>home team for game 2</h4>
</div>
</div>
....
</div>
<div>
<h1>match date 2
<div>
<div>
<h4>home team for game 4</h4>
</div>
</div>
<div>
<div>
<h4>home team for game 5</h4>
</div>
</div>
....
</div>
........
这是demo 希望这会有所帮助。