Question

I have a list in Controller (MVC)

public CompanyController() {
         _company = new List<CompanyModel>{
            new CompanyModel{Name="A 1", Email="[e-mail]", Group="Group1"},
            new CompanyModel{Name="A 2", Email="[e-mail]", Group="Group2"},
            new CompanyModel{Name="A 3", Email="[e-mail]", Group="Group3"},
            new CompanyModel{Name="B 1", Email="[e-mail]", Group="Group1"},
            new CompanyModel{Name="C 1", Email="[e-mail]", Group="Group2"},
            new CompanyModel{Name="D 1", Email="[e-mail]", Group="Group4"},
            new CompanyModel{Name="E 1", Email="[e-mail]", Group="Group5"},
            new CompanyModel{Name="E 2", Email="[e-mail]", Group="Group6"},
            new CompanyModel{Name="F 1", Email="[e-mail]", Group="Group6"},
            new CompanyModel{Name="G 1", Email="[e-mail]", Group="Group5"},
            new CompanyModel{Name="H 1", Email="[e-mail]", Group="Group6"},
            new CompanyModel{Name="I 1", Email="[e-mail]", Group="Group3"},
            new CompanyModel{Name="J 1", Email="[e-mail]", Group="Group7"},
            new CompanyModel{Name="K 1", Email="[e-mail]", Group="Group6"},
            new CompanyModel{Name="L 1", Email="[e-mail]", Group="Group1"},
            new CompanyModel{Name="M 1", Email="[e-mail]", Group="Group2"},
            new CompanyModel{Name="N 1", Email="[e-mail]", Group="Group2"},
            new CompanyModel{Name="O 1", Email="[e-mail]", Group="Group4"},
            new CompanyModel{Name="P 1", Email="[e-mail]", Group="Group5"},            
            new CompanyModel{Name="R 1", Email="[e-mail]", Group="Group5"},
            new CompanyModel{Name="S 1", Email="[e-mail]", Group="Group8"},
            new CompanyModel{Name="T 1", Email="[e-mail]", Group="Group8"},
            new CompanyModel{Name="U 1", Email="[e-mail]", Group="Group1"},
            new CompanyModel{Name="V 1", Email="[e-mail]", Group="Group2"},
            new CompanyModel{Name="X 1", Email="[e-mail]", Group="Group4"},
            new CompanyModel{Name="Y 1", Email="[e-mail]", Group="Group3"},
            new CompanyModel{Name="Z 1", Email="[e-mail]", Group="Group3"},
            new CompanyModel{Name="W 1", Email="[e-mail]", Group="Group6"},
         };
      }

which I sent via JSON to JQuery as:

objectCompany = null;
data = "";

$.ajax({
         url: '/Company/List',
         dataType: 'json',
         contentType: 'application/json; charset=utf-8',
         success: function (msg) {
            data = msg;
         },
         complete: function () {
            objectCompany = data;
         }
      });

I want to append to my select tag <select name="filters" id="filters"></select> all options which has Group values without repeating the similar values.

UPDATE

if (objectCompany != null) {
     $("#filters").empty();
     $("#filters").html("<option value='all' selected='selected'>All groups</option>");
     var arrayUnique = [];
     for (var i = 0; i < objectCompany .length; i++) {
        for (var j = i + 1; j < objectCompany .length; j++) {
           if (objectCompany [i].Group === objectCompany [j].Group) {
              j = ++i;
           }
        }
        arrayUnique.push(objectCompany [i].Group);
     }

     arrayUnique = arrayUnique.sort();

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

Update: Now it works 🙂

Answer 1

Why struggling with javascript? Why don’t you use a view model? Why don’t you prepare the data from your controller action so that all that the view has to do is display it? What’s the purpose of wasting your bandwidth with some repeated groups in the JSON?

public ActionResult List()
{
    var model = _company.Select(x => x.Group).Distinct();
    return Json(model, JsonRequestBehavior.AllowGet);
}

Now it’s simple:

var filters = $('#filters');
filters.empty();
filters.append(
    $('<option/>', {
        value: 'all',
        selected: 'selected',
        text: 'All groups'
    })
);
$.each(objectCompany, function (index, group) {
    filters.append(
        $('<option/>', {
            value: group,
            text: group
        })
    );
});

---

UPDATE:

If you want to do this filtering on the client side you could define a function which will get the distinct elements:

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

and then:

var filters = $('#filters');
filters.empty();
filters.append(
    $('<option/>', {
        value: 'all',
        selected: 'selected',
        text: 'All groups'
    })
);
var groups = $.distinct(objectCompany, function(item) { return item.Group; });

$.each(groups, function (index, group) {
    filters.append(
        $('<option/>', {
            value: group,
            text: group
        })
    );
});