mootools json filter with groups

Question

I have a json string. It looks like:

  var data= [{"name":"Name1","value":"Value1","group":"Group1","order":"1"},
      {"name":"Name2","value":"Value2","group":"Group1","order":"2"},
      {"name":"Name3","value":"Value3","group":"Group1","order":"3"},
      {"name":"Name4","value":"Value4","group":"Group2","order":"4"},
      {"name":"Name5","value":"Value5","group":"Group2","order":"5"},
      {"name":"Name6","value":"Value6","group":"Group3","order":"6"},
      {"name":"Name7","value":"Value7","group":"Group4","order":"7"},
      {"name":"Name8","value":"Value8","group":"Group4","order":"8"},
      {"name":"Name9","value":"Value9","group":"Group4","order":"9"}]

Is it possible to convert this into html output using mootools javascript library with sorting by order:

 <h2>Group1</h2> 
 <div>Name1 ... Value1</div>
 <div>Name2 ... Value2</div>
 <div>Name3 ... Value3</div>
 <h2>Group2</h2> 
 <div>Name4 ... Value4</div>
 <div>Name5 ... Value5</div>
 <h2>Group3</h2> 
 <div>Name6 ... Value6</div>
 <h2>Group4</h2> 
 <div>Name7 ... Value7</div>
 <div>Name8 ... Value8</div>
 <div>Name9 ... Value9</div>

This is my sorting function:

data.sort(function(a,b){
   return parseInt(a.order) > parseInt(b.order);
});

My render function is follow:

var html_data = '';
data.each(function(d){      
       html_data += tmpl.render("data", d);            
}); 

container.set('html', html_data);

But I don't know how to group it.

Thanks!

Answer 1

Just test group for previous value in each loop:

var html_data = '';
var group = '';
data.each( function( item, index ) {
    if ( group !== item.group ) {
        html_data += '<h2>'+item.group+'</h2>';
    }
    html_data += '<div>'+item.name+'...'+item.value+'</div>';
    group = item.group;
});

container.set( 'html', html_data );