在对象数组中查找特定的键/值，然后打印出该对象中的另一个键/值

Question

我收到了来自$.getJSON调用的响应。现在，我想用"selected"：true选择对象的name属性，并将其打印到id为charTitle的div中。

"titles": [{
        "id": 17,
        "name": "Sergeant %s"
    }, {
        "id": 53,
        "name": "%s, Champion of the Naaru"
    }, {
        "id": 64,
        "name": "%s, Hand of A'dal",
        "selected": true
    }]

Answer 1

您可以通过一个简单的循环来实现这一点：

for (var i = 0; i < obj.titles.length; i++) {
    if (obj.titles[i].selected) {
        $('#charTitle').text(obj.titles[i].name);
    }
}

小提琴示例

或者使用jQuery的$.each():

$.each(obj.titles, function(i, title) {
    if (title.selected)
        $('#charTitle').text(title.name);        
});

请注意，如果数组中有多个对象的selected设置为true，则需要使用append()而不是text()来设置div的内容，否则将覆盖以前的值。

Answer 2

使用下划线可以通过获得

var titles = ...
_.findWhere(titles, {selected: true});

参见http://underscorejs.org/#findWhere

Answer 3

尝试使用Array.prototype.filter()

var arr = [{
  "id": 17,
  "name": "Sergeant %s"
}, {
  "id": 53,
  "name": "%s, Champion of the Naaru"
}, {
  "id": 64,
  "name": "%s, Hand of A'dal",
  "selected": true
}]
var res = arr.filter(function(val, key) {
  return val.selected === true
})[0].name;
$("#charTitle").html(res)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="charTitle"></div>