Question

Given a JSON resultset such as the following:

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

How could I iterate through this in groups?

Example

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

Also, it would be preferable that the solution can support more dimensions, even maybe with some minor adjustments, as it’s looking like I’ll have to use this a few times for several applications. And it shouldn’t be an issue, but it may also be good to take into consideration that the results will not always be in order by group such as in the example I provided. It may be ordered 1, 2, 2, 1, 2… etc.

Answer 1

Sort the Array, then iterate and track which fooID you’re on, and create a new legend when it changes.

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