jQuery - перебирает возвращаемый массив JSON и группирует

Question

jQuery - перебирает возвращаемый массив JSON и группирует

0

Таким образом, у меня есть массив JSON, возвращаемый в функцию getJSON.done, которая работает отлично. Массив возвращается в том же формате, что и ниже:

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

То, что я хотел бы сделать, - это таблетировать результаты, сгруппированные по дате. Итак, имея "tr" для даты, следующей за результатами для этой даты, например:

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, который будет зацикливаться на каждой дате в наборе результатов?

Collin Grady 22 фев. 2014, в 23:52

Источник

1

Эти решения никогда не бывают такими простыми, как вы думаете. Всегда ли данные будут возвращаться в порядке дат? Всегда ли будет форматироваться DD.MM.YYYY ? Если так, есть способ ...
cale_b 22 фев. 2014, в 22:40
0

извиняюсь за задержку ответа. но да, всегда один и тот же формат
user2672288 23 фев. 2014, в 15:06

Теги:

javascript

jquery

json

5 ответов

0

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

matthewk 22 фев. 2014, в 21:39

0

Как примечание: проверка DOM на предмет наличия даты уже будет очень медленной на большой странице с большим количеством элементов. Лучше всего выполнять такую работу в Javascript и обновлять DOM, только когда будете готовы. Конечно, на маленькой странице это не имеет большого значения.
Keith 22 фев. 2014, в 23:38
0

спасибо Мэтью, спасибо, что нашли время, чтобы написать код и создать скрипку. прекрасно работает, как и другой ответ от Коллина, так что было перепутать между двумя
user2672288 23 фев. 2014, в 15:10

0

Вы должны иметь возможность сортировать таблицу, например:

 <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();

Not Entirely Sure 22 фев. 2014, в 20:28

0

Сначала сохраните все свои записи в хеше (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);
  });
}

Keith 22 фев. 2014, в 20:11

0

Каждая запись byDate является массивом, к которому вы будете добавлять одну или несколько записей (то есть r.push(this) . Когда вы закончите, у вас будет такая структура, как {01-01-2004:[{name:'Joe',score:44,date:'01-01-2004'},...], 02-02-2004:[...]}
Keith 22 фев. 2014, в 23:05

-1

Даже если даты неупорядочены, создайте новый пустой объект json, сделайте цикл над исходным json, на каждой итерации добавьте новый объект json, индексированный по дате.

Конечный объект будет выглядеть так:

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

Тогда вы можете легко отформатировать этот новый json-объект.

ОК?

Niloct 22 фев. 2014, в 20:34

0

Я не понимаю, отрицательный голос, это было из-за простого дублирования информации?
Niloct 23 фев. 2014, в 01:47
0

downvote не от меня, я нашел это полезным
user2672288 23 фев. 2014, в 15:08

Ещё вопросы

Эти решения никогда не бывают такими простыми, как вы думаете. Всегда ли данные будут возвращаться в порядке дат? Всегда ли будет форматироваться DD.MM.YYYY ? Если так, есть способ ...
извиняюсь за задержку ответа. но да, всегда один и тот же формат
Как примечание: проверка DOM на предмет наличия даты уже будет очень медленной на большой странице с большим количеством элементов. Лучше всего выполнять такую работу в Javascript и обновлять DOM, только когда будете готовы. Конечно, на маленькой странице это не имеет большого значения.
спасибо Мэтью, спасибо, что нашли время, чтобы написать код и создать скрипку. прекрасно работает, как и другой ответ от Коллина, так что было перепутать между двумя
Каждая запись byDate является массивом, к которому вы будете добавлять одну или несколько записей (то есть r.push(this) . Когда вы закончите, у вас будет такая структура, как {01-01-2004:[{name:'Joe',score:44,date:'01-01-2004'},...], 02-02-2004:[...]}
Я не понимаю, отрицательный голос, это было из-за простого дублирования информации?
downvote не от меня, я нашел это полезным

Collin Grady · Accepted Answer · 2014-02-22T20-54-00.000Z

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