javascript - 根据json数据属性动态生成多个div

Question

我正在尝试将灯具放入此数据 http://www.football-data.org//soccerseasons/354/fixtures根据 matchday 属性分成单独的 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'
            });
          })
        })
      });
    }

Answer 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 希望这会有所帮助。