How to group equal values with JSON

Question

Using the following code build a select of options:

$(document).ready(function () {
            var customersSource =
            { dataType: "json",
              dataFields: [{ name: 'Estado'},{ name: 'OrderID'}],
              url: 'customers.txt' };
            var customersAdapter = new $.jqx.dataAdapter(customersSource);
            $("#customers").jqxComboBox(
            { source: customersAdapter, 
              width: 300,
              height: 25,
              promptText: "Selecione o Estado",
              displayMember: 'Estado',
              valueMember: 'CustomerID'});    
            var ordersSource =
            { dataType: "json",
              dataFields: [{ name: 'Estado'},{ name:'OrderID'}],
              url: 'customers.txt'};
            var ordersAdapter = new $.jqx.dataAdapter(ordersSource);



$("#customers").bind('select', function(event)
        {
            if (event.args)
            {
                $("#orders").jqxComboBox({ disabled: false, selectedIndex: -1});        
                var value = event.args.item.value;
                ordersSource.data = {CustomerID: value};
                ordersAdapter = new $.jqx.dataAdapter(ordersSource, {
                    beforeLoadComplete: function (records) {
                        var filteredRecords = new Array();
                        for (var i = 0; i < records.length; i++) {
                            if (records[i].CustomerID == value)
                                filteredRecords.push(records[i]);
                        }
                        return filteredRecords;
                    }
                });
                $("#orders").jqxComboBox({ source: ordersAdapter, autoDropDownHeight: ordersAdapter.records.length > 10 ? false : true});
            }
        }); 

That consumes the following txt:

[{"Estado":"São Paulo", "OrderID":"Loja1-SP"},
 {"Estado":"São Paulo", "OrderID":"Loja2-SP"},
 {"Estado":"São Paulo", "OrderID":"Loja3-SP"},
 {"Estado":"Rio de Janeiro", "OrderID":"Loja1-RJ"},
 {"Estado":"São Paulo", "OrderID":"Loja4-SP"},
 {"Estado":"Mato Grosso", "OrderID":"Loja5-MT"},
 {"Estado":"São Paulo", "OrderID":"Loja6-SP"},
 {"Estado":"Minas-Gerais", "OrderID":"Loja1-MG"},
 {"Estado":"São Paulo", "OrderID":"Loja7-SP"},
 {"Estado":"Minas Gerais", "OrderID":"Loja2-MG"},
 {"Estado":"São Paulo", "OrderID":"Loja8-SP"}   ]

This code makes 7 values 'São Paulo' appear in select and what I want is to group the similar values in only 1 'São Paulo' so that it does not appear 7 times the same value.

Answer 1

I got into the groove and did my version manually:

Grouping:

var items = {},
  base, key;
$.each(values, function(index, val) {
  key = val.Estado;
  if (!items[key]) {
    items[key] = [];
  }
  items[key].push(val.OrderID);
});

populating the select:

var $select = $('#cities');
$.each(items, function(index, val) {

  var optgroup = $('<optgroup>');
  optgroup.attr('label', index);

  $.each(val, function(index, val) {
      optgroup.append($('<option>', {
          text: val
      }));
  });

  $select.append(optgroup);
});

HTML select:

<select id="cities"></select>

Follows jsfiddle.

Answer 2

Try the following

var jsonData = [{"Estado":"São Paulo", "OrderID":"Loja1-SP"},
 {"Estado":"São Paulo", "OrderID":"Loja2-SP"},
 {"Estado":"São Paulo", "OrderID":"Loja3-SP"},
 {"Estado":"Rio de Janeiro", "OrderID":"Loja1-RJ"},
 {"Estado":"São Paulo", "OrderID":"Loja4-SP"},
 {"Estado":"Mato Grosso", "OrderID":"Loja5-MT"},
 {"Estado":"São Paulo", "OrderID":"Loja6-SP"},
 {"Estado":"Minas-Gerais", "OrderID":"Loja1-MG"},
 {"Estado":"São Paulo", "OrderID":"Loja7-SP"},
 {"Estado":"Minas Gerais", "OrderID":"Loja2-MG"},
 {"Estado":"São Paulo", "OrderID":"Loja8-SP"}   ]

var uniqueNames = [];
for(i = 0; i< jsonData.length; i++){    
    if(uniqueNames.indexOf(jsonData[i].Estado) === -1){
        uniqueNames.push(jsonData[i].Estado);        
    }        
}

console.log(uniqueNames)

Answer 3

Hello.

You can group objects simply using the library Underscorejs. Take the example:

var data = [{
  "Estado": "São Paulo",
  "OrderID": "Loja1-SP"
}, {
  "Estado": "São Paulo",
  "OrderID": "Loja2-SP"
}, {
  "Estado": "São Paulo",
  "OrderID": "Loja3-SP"
}, {
  "Estado": "Rio de Janeiro",
  "OrderID": "Loja1-RJ"
}, {
  "Estado": "São Paulo",
  "OrderID": "Loja4-SP"
}, {
  "Estado": "Mato Grosso",
  "OrderID": "Loja5-MT"
}, {
  "Estado": "São Paulo",
  "OrderID": "Loja6-SP"
}, {
  "Estado": "Minas-Gerais",
  "OrderID": "Loja1-MG"
}, {
  "Estado": "São Paulo",
  "OrderID": "Loja7-SP"
}, {
  "Estado": "Minas Gerais",
  "OrderID": "Loja2-MG"
}, {
  "Estado": "São Paulo",
  "OrderID": "Loja8-SP"
}];
var groupedData = _.groupBy(data, function(d) {
  return d.Estado
});
console.log(groupedData);

It will generate Minas Gerais twice because it makes comparison of exact values. In your example there are "Minas Gerais" and "Minas Gerais".