1

Utilizando o seguinte código construo um select de opções:

$(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});
            }
        }); 

Que consome o seguinte 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"}   ]

Este código faz com que no select apareça 7 valores 'São Paulo' e o que eu desejo seria agrupar os valores semelhantes em apenas 1 'São Paulo' para que não apareça 7 vezes o mesmo valor.

3 Respostas 3

1

Entrei na onda e fiz minha versão de forma manual:

Agrupamento:

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

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

Segue jsfiddle.

0

Tente o seguinte

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)

0

Olá.

Você pode agrupar os objetos de forma simples utilizando a library UnderscoreJs. Veja o exemplo:

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

Ele irá gerar Minas Gerais duas vezes porque ele faz comparação de valores exatos. No seu exemplo existem "Minas Gerais" e "Minas-Gerais".

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .