我有一个如下所示的数组,我想过滤数据并将过滤后的列表插入下拉列表。
以下是数据:
{"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));
我该怎么做?
答案 0 :(得分:1)
以下是使用Array.filter()
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;
答案 1 :(得分:0)
您可以使用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));
});
答案 2 :(得分:0)
您可以尝试这样的事情:
如果你觉得,在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>