从控制器接收到JSON数据后，用javascript生成选择列表选项

Question

我有一个列表在控制器(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"},
         };
      }

我通过JSON发送给JQuery作为:

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

我想将所有具有Group值的选项附加到我的select标签<select name="filters" id="filters"></select>，而不重复类似的值。

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

更新:现在它工作了:)

Answer 1

为什么要纠结于javascript?为什么不使用视图模型呢?为什么不从控制器动作中准备数据这样视图所要做的就是显示它?在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
        })
    );
});

---

更新:

如果你想在客户端做这个过滤，你可以定义一个函数来获取不同的元素:

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

然后:

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