Javascript - 将数组结果过滤到下拉列表中

Question

我有一个如下所示的数组，我想过滤数据并将过滤后的列表插入下拉列表。

以下是数据：

{"people":[
    {
      "id":"100",
      "name":"name 1",
      "desc":"desc 1",
      "class": "a"
    },
    {
      "id":"192",
      "name":"name 2",
      "desc":"desc 2",
      "class": "b" 
    },
    {
      "id":"324",
      "name":"name 3",
      "desc":"desc 3",
      "class": "b" 
    },
    {
      "id":"324",
      "name":"name 4",
      "desc":"desc 4",
      "class": "a" 
    },
    {
      "id":"324",
      "name":"name 5",
      "desc":"desc 5",
      "class": "a"
    }
]}

我现在需要做的是添加“class”为“a”的数组，然后将其中的id插入下拉列表，如：

$('#myselect').append($('<option>').text(value.id).attr('value', value.id));

我该怎么做？

Answer 1

以下是使用Array.filter()

的解决方案

＆＃13;

＆＃13;

var obj = {
  "people": [{
    "id": "100",
    "name": "name 1",
    "desc": "desc 1",
    "class": "a"
  }, {
    "id": "192",
    "name": "name 2",
    "desc": "desc 2",
    "class": "b"
  }, {
    "id": "324",
    "name": "name 3",
    "desc": "desc 3",
    "class": "b"
  }, {
    "id": "324",
    "name": "name 4",
    "desc": "desc 4",
    "class": "a"
  }, {
    "id": "324",
    "name": "name 5",
    "desc": "desc 5",
    "class": "a"
  }]
};

obj.people.filter(function(val) {
  if (val.class == "a") {
    $('#myselect').append($('<option>').text(val.id).attr('value', val.id));
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用lodash库

执行此操作

//Filter with class = 'a'
var peopleWithClassA = _.filter(obj.people, { class: 'a' });

//Append option elem for each filtered people
_.forEach(peopleWithClassA, function(people) {
   $('#myselect').append($('<option>')
                 .text(people.id)
                 .attr('value', people.id));
});

没有lodash：

obj.people
.filter(function(p) {
    return p.class === 'a';
})
.forEach(function(p) {
    $('#myselect').append($('<option>').text(p.id).attr('value', p.id));
});

Answer 3

您可以尝试这样的事情：

逻辑

• 获取唯一的班级名称。
• 循环使用此唯一值并根据它过滤数据
• 根据对象创建htmlString并将其附加到必要的选择

如果你觉得，在html中添加select是过度杀戮，你也可以根据数据生成它们。

示例

var data = {
  "people": [{
    "id": "100",
    "name": "name 1",
    "desc": "desc 1",
    "class": "a"
  }, {
    "id": "192",
    "name": "name 2",
    "desc": "desc 2",
    "class": "b"
  }, {
    "id": "324",
    "name": "name 3",
    "desc": "desc 3",
    "class": "b"
  }, {
    "id": "324",
    "name": "name 4",
    "desc": "desc 4",
    "class": "a"
  }, {
    "id": "324",
    "name": "name 5",
    "desc": "desc 5",
    "class": "a"
  }]
}

var uniqueClasses = {};
data.people.forEach(function(p) {
  uniqueClasses[p.class] = 1;
});

Object.keys(uniqueClasses).forEach(function(c) {
  var _html = data.people.filter(function(p) {
    return p.class === c
  }).map(function(p) {
    return "<option value='" + p.id + "'>" + p.name + "</option>"
  }).join("");
  $("#class_" + c).append(_html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select id="class_a"></select>
<select id="class_b"></select>