Question

I have a JSON array like this

[{"Email":"[e-mail]","Name":"ACO","Groups":["MOD_SW","MOD_PI","MOD_GE"],"Id":63,"Url":"aco"},
{"Email":"[e-mail]","Name":"Agpo","Groups":["MOD_PI"],"Id":22,"Url":"agpo"},
{"Email":"[e-mail]","Name":"Akatherm","Groups":["MOD_SW"],"Id":64,"Url":"akatherm"},
{"Email":"[e-mail]","Name":"Albrand","Groups":["MOD_PI,"MOD_GE"],"Id":23,"Url":"albrand"}]

I want to create a new array (for select tag) with distinct Groups.

This Groups is an array.

I want that selectbox to have the following values:

MOD_SW
MOD_PI
MOD_GE

My JS:

UpdateSelectMenu: function (selectId, data) {
      $(selectId).empty();
      $(selectId).html("<option value='all' selected='selected'>All groups</option>");
      var array_unique_values = [];

      for (var i = 0; i < data.Groups.length; i++) {
         for (var j = i+1; j < data.Groups.length; j++) {
            if (data.Groups[i] === data.Groups[j]) {
               j = ++i;
            }
         }
         array_unique_values.push(data.Groups[i]);
      }

      array_unique_values = array_unique_values.sort();

      $.each(array_unique_values, function (k, v) {
         $(selectId).append("<option value='" + v + "'>" + v + "</option>");
      });
   }

I tried also

for (var i = 0; i < data.length; i++) {  //browse whole data
         for (var j = 0; j < data[i].Groups.length; j++) {  //browse Groups array
            for (var k = j + 1; j < data[i].Groups.length; k++) {
               if (data[i].Groups[j] === data[i].Groups[k]) {
                  continue;
               }
            }

            array_unique_values.push(data[i].Groups[j]);
         }
      }

But error appears as: Groups.length is null or not an object

This code appends to select tag the Group values but it appears as duplicates because Groups is an array.

I have to create a new for statement to browse the Groups array ?

Or there is another alternative to avoid nested for statements ?

Thank you

Answer 1

2 nested loops could do the job:

var data = [... your data ...];
var groups = [];
$.each(data, function(i, item) {
    $.each(item.Groups, function(j, group) {
        if ($.inArray(group, groups) == -1) {
            groups.push(group);
        }
    });    
});

// at this stage groups = ["MOD_SW", "MOD_PI", "MOD_GE"]

and if you wanted to directly append options to your dropdown:

var groups = [];
$.each(data, function(i, item) {
    $.each(item.Groups, function(j, group) {
        if ($.inArray(group, groups) == -1) {
            groups.push(group);
            $(selectId).append(
                $('<option/>', {
                    value: group,
                    text: group
                })
            );
        }
    });    
});

---

UPDATE:

And to make this more efficient you could define a static dtstinct method:

$.extend({
    distinct : function(arr) {
       var result = [];
       $.each(arr, function(index, value) {
           if ($.inArray(value, result) == -1) {
               result.push(value);
           }
       });
       return result;
    }
});

and then use the .map method:

var data = [... your data ...];
var groups = $.distinct($(data).map(function() {
    return this.Groups;    
}));
$.each(groups, function(index, group) {
    $(selectId).append(
        $('<option/>', {
            value: group,
            text: group
        })
    );
});