按多个属性对 JSON 结果集进行分组

Question

给定一个 JSON 结果集，如下所示：

[ {fooID: 1, fooLabel: "one", barID: 20 barLabel: "twenty"},
  {fooID: 1, fooLabel: "one", barID: 30 barLabel: "thirty"},
  {fooID: 1, fooLabel: "one", barID: 40 barLabel: "forty"},
  {fooID: 2, fooLabel: "two", barID: 500 barLabel: "fivehundred"},
  {fooID: 2, fooLabel: "two", barID: 600 barLabel: "sixhundred"} ]

我怎样才能分组迭代呢？

例子

<legend>1 - one</legend>
  <div>20 - twenty</div>
  <div>30 - thirty</div>
  <div>40 - forty</div>

<legend>2 - two</legend>
  <div>500 - fivehundred</div>
  <div>600 - sixhundred</div>

此外，最好该解决方案可以支持更多维度，甚至可以进行一些小的调整，因为看起来我必须在多个应用程序中使用它几次。这不应该是一个问题，但考虑到结果并不总是按组排序，例如我提供的示例，这也可能是件好事。可以按 1、2、2、1、2...等顺序排列。

Answer 1

对数组进行排序，然后迭代并跟踪您所在的fooID，并在它发生变化时创建一个新的图例。

var my_arr = [ {fooID: 1, fooLabel: "one", barID: 20, barLabel: "twenty"},
  {fooID: 1, fooLabel: "one", barID: 30, barLabel: "thirty"},
  {fooID: 1, fooLabel: "one", barID: 40, barLabel: "forty"},
  {fooID: 2, fooLabel: "two", barID: 500, barLabel: "fivehundred"},
  {fooID: 2, fooLabel: "two", barID: 600, barLabel: "sixhundred"} ];

my_arr.sort(function(a,b) {
    return a.fooID > b.fooID;
});

var curr_group;

$.each(my_arr,function(i,v) {
    if(curr_group !== v.fooID) {
        curr_group = v.fooID;
        $('<legend>',{text:v.fooID + ' - ' + v.fooLabel}).appendTo('body');
    }
    $('<div>',{text:v.barID + ' - ' + v.barLabel}).appendTo('body');
});