私はコントローラー（MVC）でリストを持っているコントローラ

Question

からJSONデータをrecevinig後にJavaScriptで選択リストの選択肢を生成

ように私はjQueryのにJSONを介して送信

public CompanyController() { 
     _company = new List<CompanyModel>{ 
      new CompanyModel{Name="A 1", Email="a1@company.com", Group="Group1"}, 
      new CompanyModel{Name="A 2", Email="a2@company.com", Group="Group2"}, 
      new CompanyModel{Name="A 3", Email="a3@company.com", Group="Group3"}, 
      new CompanyModel{Name="B 1", Email="b1@company.com", Group="Group1"}, 
      new CompanyModel{Name="C 1", Email="c1@company.com", Group="Group2"}, 
      new CompanyModel{Name="D 1", Email="d1@company.com", Group="Group4"}, 
      new CompanyModel{Name="E 1", Email="e1@company.com", Group="Group5"}, 
      new CompanyModel{Name="E 2", Email="e2@company.com", Group="Group6"}, 
      new CompanyModel{Name="F 1", Email="f1@company.com", Group="Group6"}, 
      new CompanyModel{Name="G 1", Email="b1@company.com", Group="Group5"}, 
      new CompanyModel{Name="H 1", Email="b1@company.com", Group="Group6"}, 
      new CompanyModel{Name="I 1", Email="b1@company.com", Group="Group3"}, 
      new CompanyModel{Name="J 1", Email="b1@company.com", Group="Group7"}, 
      new CompanyModel{Name="K 1", Email="b1@company.com", Group="Group6"}, 
      new CompanyModel{Name="L 1", Email="b1@company.com", Group="Group1"}, 
      new CompanyModel{Name="M 1", Email="b1@company.com", Group="Group2"}, 
      new CompanyModel{Name="N 1", Email="b1@company.com", Group="Group2"}, 
      new CompanyModel{Name="O 1", Email="b1@company.com", Group="Group4"}, 
      new CompanyModel{Name="P 1", Email="b1@company.com", Group="Group5"},    
      new CompanyModel{Name="R 1", Email="b1@company.com", Group="Group5"}, 
      new CompanyModel{Name="S 1", Email="b1@company.com", Group="Group8"}, 
      new CompanyModel{Name="T 1", Email="b1@company.com", Group="Group8"}, 
      new CompanyModel{Name="U 1", Email="b1@company.com", Group="Group1"}, 
      new CompanyModel{Name="V 1", Email="b1@company.com", Group="Group2"}, 
      new CompanyModel{Name="X 1", Email="b1@company.com", Group="Group4"}, 
      new CompanyModel{Name="Y 1", Email="b1@company.com", Group="Group3"}, 
      new CompanyModel{Name="Z 1", Email="b1@company.com", Group="Group3"}, 
      new CompanyModel{Name="W 1", Email="b1@company.com", Group="Group6"}, 
     }; 
     } 

：私がしたい

objectCompany = null; 
data = ""; 

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

selectタグ<select name="filters" id="filters"></select>のすべてのオプションに、同じ値を繰り返さずにGroup値を追加します。

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

更新：今、それは動作します:)なぜjavascriptのに苦労

Answer 1

？なぜビューモデルを使用しないのですか？コントローラアクションからデータを準備して、ビューが行うべきことがすべて表示されるようにするのはなぜですか？ JSONでいくつかの繰り返しのグループで帯域幅を無駄にする目的は何ですか？

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

今では簡単です：

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：

あなたは、クライアント側でこのフィルタリングを行いたい場合は、個別の要素を取得する機能を定義することができます。

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

a nd：

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