Question

所以我在getJSON .done函数中返回了一个JSON数组，这一切都很有效。该数组以类似于下面的格式返回：

results
   |___date
   |___name
   |___score

事情是我可能得到一组结果，如：

01.01.2014
Joe Bloggs
25
01.01.2014
Jim Jones
50
02.01.2014
Alice Smith
33
01.01.2014
Eve Harris
40

我想要做的是将按日期分组的结果制成表格。所以有一个＆＃39; tr＆＃39;对于该日期的结果所遵循的日期，例如：

01.01.2014
Joe Bloggs    25
Jim Jones     50
Eve Harris    40
02.01.2014
Alice Smith   33

我目前正在使用以下代码填充表格：

    $.each(rows, function() {
            var table = $('#table-results');
            var matchDate = this.date;
            var row = $('<tr>');
            var name = $('<td>').html(this.name);
            var score = $('<td>').html('<strong>' + this.score + '</strong>');
            row.append(matchDate, name, score);
            table.append(row);
    });

如何添加另一个$ .each循环，它将遍历结果集中的每个日期？

Answer 1

http://jsfiddle.net/fwpzr/1/

首先分组数据，然后转储到表;不承担排序数据。

// Assumption: JSON data is in "rows"
var data = {};
var dates = [];
$.each(rows, function () {
    if (typeof data[this.date] == "undefined")
    {
        data[this.date] = [];
    }
    data[this.date].push(this);
    if (dates.indexOf(this.date) == -1)
    {
        dates.push(this.date);
    }
});
dates = dates.sort();

var table = $('#table-results');
$.each(dates, function () {
    table.append(
        $("<tr>").append(
            $("<th>").attr("colspan", "2")
                     .html(this)
        )
    );

    data[this] = data[this].sort(function (a, b) {
        return a.name > b.name;
    });

    $.each(data[this], function () {
        table.append(
            $("<tr>").append(
                $("<td>").html(this.name)
            ).append(
                $("<th>").html(this.score)
            )
        );
    });
});

Answer 2

首先将所有记录存储在哈希（byDate）中。然后列举一下。见JSFiddle

var rows = [
    {date: "01.01.2014", name: "Joe Bloggs", score: "25"},
    {date: "01.01.2014", name: "Jim Jones", score: "50"},
    {date: "02.01.2014", name: "Alice Smith", score: "33"},
    {date: "01.01.2014", name: "Eve Harris", score: "40"},
];

var byDate = {};
$.each(rows, function() {
  var r = byDate[this.date] || (byDate[this.date] = []);
  r.push(this);
});
var table = $('#table-results');
for (var d in byDate) {
  table.append($('<tr><td>'+d+'</td></tr>'));
  $.each(byDate[d], function() {
    var row = $('<tr>');
    var name = $('<td>').html(this.name);
    var score = $('<td>').html('<strong>' + this.score + '</strong>');
    row.append(name, score);
    table.append(row);
  });
}

Answer 3

        $.each(rows, function() {
            var table = $('#table-results');
            var matchDate = this.date;
            var headerRow = $('#header_for_' + matchDate.replace(/\./g, ''));
            if(headerRow.length === 0) {
                headerRow = $('<tr>');
                $(headerRow).attr('id', 'header_for_' + matchDate.replace(/\./g, ''));
                headerRow.append(matchDate);
                table.append(headerRow);
            }
            var dataRow = $('<tr>');
            $(dataRow).attr('data-date', matchDate);
            var name = $('<td>').html(this.name);
            var score = $('<td>').html('<strong>' + this.score + '</strong>');
            dataRow.append(name, score);
            var lastDataRowThisDate = $('tr[data-date="' + matchDate + '"]').last();
            if(lastDataRowThisDate.length === 0) {
                lastDataRowThisDate = headerRow;
            }
            dataRow.insertAfter(lastDataRowThisDate);
    });

Answer 4

您应该能够对表进行排序，如下所示：

 <table id="mytable">
   <tbody>
     <tr>
       <td>02.01.2014</td>
       <td>hello</td>
     </tr>
     <tr>
       <td>02.01.2014</td>
       <td>hello2</td>
     </tr>
     <tr>
       <td>01.01.2014</td>
       <td>hello</td>
     </tr>
   </tbody>
  </table>

function sortTable(){
  var rows = $('#mytable tbody  tr').get();

  rows.sort(function(a, b) {

  var A = $(a).children('td').eq(0).text().toUpperCase();
  var B = $(b).children('td').eq(0).text().toUpperCase();

  if(A < B) {
    return -1;
  }

  if(A > B) {
    return 1;
  }

  return 0;

  });

  $.each(rows, function(index, row) {
    $('#mytable').children('tbody').append(row);
  });
}
sortTable();

Answer 5

即使日期是无序的，创建一个新的空json对象，在原始json上做一个循环，在每次迭代时添加到由date索引的新json对象。

最终的对象如下：

{
'01.01.2014': [
        {'Joe Bloggs',25},
        {'Jim Jones',50},
        {'Eve Harris',40}
    ]
    /* and so on */
}

然后你可以轻松地格式化这个新的json对象。

好吗？

jQuery - 迭代返回的JSON数组和分组

5 个答案: