Question

我在使用json对象打印到html数组时遇到问题。我使用的原始代码是javascrit对象，它是＆＃34;购物车＆＃34;

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

＆＃34; ShoppinCartItems＆＃34;中的数组

{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"}]}

（我不知道这是否有效，因为我正在使用一个例子。）

因此，对于这个json对象数组，我想在html display中显示一个表，这些值按日期分组。我使用的实际代码是：

$.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数组中分组，我不知道哪个是bes解决方案，希望有人可以帮助我

由于

Answer 1

您的问题似乎与找到的here类似。

解决方案如下：

首先，单独分组和聚集。让我们宣布典型的“分组依据”功能。它需要另一个为数组元素生成“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]
            });
    }
});

Answer 2

我认为您需要做的就是按日期排序数组，您可以这样做：

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

当您循环遍历数组时，请保留对最后日期的引用，并且只有在输出不同时才将日期添加到输出中。

This example将有助于更好地解释它。

使用jquery按日期排列json对象数组

2 个答案: