Сгруппировать по дате массив json объектов с помощью jquery [duplicate]

0

У меня проблемы с печатью в html массив с объектами json. Исходный код Im, используемый для этого объекта javascrit, который является "корзиной покупок",

var ShoppingCart = {
  Id: 1,
  ShoppingCartItems: [] //array with json objects
};

И массив в "ShoppinCartItems"

{Id:1,ShoppingCartItems:[{ProductID:"9",Quantity:"2",Price:"68.40",Name:"Cake",Date:"2014-05-30",StoreID:"1",UserID:"1"},{ProductID:"7",Quantity:"1",Price:"11.40",Name:"Donut",Date:"2014-05-30",StoreID:"1",UserID:"1"}]}

(Я не знаю, действительно ли это, потому что im использует пример.)

Таким образом, с помощью этого массива объектов json я хочу отобразить таблицу в html-дисплее в тех значениях, которые группируются по дате. Фактическое использование кода Im заключается в следующем:

$.each(ShoppingCart.ShoppingCartItems, function (i, Productos) {
   $(".cart").append("\
   <tr style='background-color: #F1F1F1; border-bottom: 3px solid #fff;'>\
   <td style='width: 10%;'>" + Number(Productos.Quantity) + "</td>\
   <td style='width: 33%'>" + Productos.Name + "</td>\
   <td style='width: 33%'>" + (Productos.Date || 'N/A') + "</td>\
   <td style='width: 20%'>" + Productos.Price + "</td>\
                        </tr>");
 }); //each

Но, к сожалению, результат будет таким

Qty            Name           Price
2014-05-30
2              Cake           68
2014-05-30     
1              Donut          10 (e.g.)

И я хочу получить результат

Qty            Name           Price
May 30, 2014
2             Cake            68
1             Donut           10 (e.g.)
---
May 31, 2014
1             Other product   10.00

Я хочу, чтобы продукты были сгруппированы по дате, но я не могу сгруппировать их из массива json каждого продукта, я не знаю, что это за решение, надеюсь кто-то может мне помочь

благодаря

  • 0
    товары отсортированы к этой дате или нет?
  • 0
    Спасибо за ответ, у каждого товара своя дата. Функциональность заключается в том, что пользователь выбирает дату (например, из средства выбора даты), и у каждого продукта, который он выберет, будет та дата (например, 2014-05-13), которая сегодня есть в этом случае.
Показать ещё 1 комментарий
Теги:
arrays

2 ответа

0
Лучший ответ

Я думаю, все, что вам нужно сделать, это отсортировать массив по дате, который вы можете добиться так:

data.ShoppingCartItems.sort(function (a, b) {
  return new Date(a.Date) - new Date(b.Date);
});

Когда вы приходите в цикл по массиву, держите ссылку на последнюю дату и добавляете дату на вывод, если она отличается.

Этот пример поможет объяснить это лучше.

  • 0
    Спасибо за ответ, я попробую, но в скрипте, которую вы используете forEach (которая, я думаю, не совместима с ниже IE9, и по разным причинам мне нужна совместимость, но я попробую ваш код.
  • 0
    Спасибо Энди, ваше решение (скрипка) Мне удалось использовать $ .each для совместимости и приспособиться к моим потребностям, и я проверил, и все, кажется, работает отлично !. Большое спасибо за скрипку и ваше время.
0

Похоже, ваша проблема аналогична той, что нашла здесь.

Решение было следующим:

Во-первых, раздельная группировка и агрегация. Давайте объявим прототипную функцию "group by". Требуется другая функция для создания строки "hash" для элемента массива.

Array.prototype.groupBy = function(hash){   
   var _hash = hash ? hash : function(o){return o;};
   var _map = {};   
   var put = function(map, key, value) {
     if (!map[_hash(key)]) {
       map[_hash(key)] = {};
       map[_hash(key)].group = [];
       map[_hash(key)].key = key;
     }

     map[_hash(key)].group.push(value);    
   }

   this.map(function(obj){
     put(_map, obj, obj);   
   });

   return Object.keys(_map).map(function(key){
       return {key: _map[key].key, 
         group: _map[key].group
       };   
     }); 
};

Когда группировка завершена, вы можете агрегировать данные, как вам нужно, в вашем случае

data.groupBy(function(o){
  return JSON.stringify({a: o.Phase, b: o.Step});
})
/* aggreagating */
.map(function(el){ 
  var sum = el.group.reduce(function(l,c) {
    return l + parseInt(c.Value);
  }, 0);

  el.key.Value = sum; 
  return el.key;
}); 

В общем, он работает. Я тестировал этот код в консоли Chrome, но не стесняюсь улучшать и находить ошибки;).

Я думаю, это то, что вы ищете.

Здесь у меня есть реализация группировки, которая даст вам массив дат. http://jsfiddle.net/JV499/2/

var ItemsByDate = new Array();
$.each(ShoppingCart.ShoppingCartItems, function (i, Productos) {
    var pushNewItem = true;
    for (var index = 0; index < ItemsByDate.length; index++)
    {
        dateGroup = ItemsByDate[index];
        if (dateGroup.Date && dateGroup.Date == Productos.Date) {
            dateGroup.Items.push(Productos);
            pushNewItem = false;
        } else {

            pushNewItem = true;
        }
    }
    if (pushNewItem) {
        ItemsByDate.push({
                Date : Productos.Date, Items : [Productos]
            });
    }
});
  • 0
    Я думаю, что он использует underscore.js, я не могу использовать это по некоторым причинам.
  • 0
    Третий ответ имеет решение, которое не требует другой библиотеки сценариев Java для работы. Тем не менее, это может потребовать некоторых усилий для вашего конкретного применения. Вероятно, есть гораздо более простое решение, которое решит эту проблему для вашего конкретного сценария.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню