jQuery-遍历返回的JSON数组和分组

Question

So I have a JSON array being returned in a getJSON .done function, which is all working great. The array returns in a similar format to below:

results
   |___date
   |___name
   |___score

thing is I might get a set of results like:

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

What I'd like to do is tabulate the results grouped by date. So having a 'tr' for the date followed by the results for that date, like:

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

I'm currently populating the table using the following code:

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

How can I add another $.each loop which will loop over each date in the result set?

Answer 1

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

Group data first, then dump to table; does not assume sorted data.

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

Store all of your records in a hash (byDate) first. And then enumerate over that. See this 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

You should be able to sort the table, like so:

 <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

Even if dates are unordered, create a new empty json object, do a loop over the original json, at each iteration add to the new json object indexed by date.

The final object would be like:

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

Then you can format this new json object easily.

Ok ?