javascript - 将结果从 Ajax 请求传输到数组的更简洁的方法

Question

我现在遇到了这种情况。我从这样的 AJAX 调用中得到响应

...responseJSON.d.results : [
    {
        "Title" : "SomeTitle",
        "Id" : 1
    },
    {
        "Title" : "SomeOtherTitle",
        "Id"    : 2
    }
]

现在我想浏览我的 DOM 中的选项，并检查值属性是否是请求中我的 ID 的一部分。通常我会创建一个包含所有 ID 的数组

var ids = [];
$.each(response.JSON.d.results, function(){
    ids.push(this.Id)
});

之后我将遍历选项并在数组中找不到属性时将其删除

$.each($('option.someClass'), function(){
    if(ids.indexOf(parseInt($(this).attr('value'))) === -1) $(this).remove()
});

但是我发现这有点不雅。我想知道是否有更 slim 的方法来做到这一点。非常感谢您的帮助。

Answer 1

要从数组中获取 ID，可以使用 Array#map

var ids = response.JSON.d.results.map(o => o.Id);

这将包含数组中的所有 ID。

现在，删除那些 <option>谁的value不在上述数组中，您可以从数组中创建一个选择器。

$('option.someClass')
    .not('option[value="' + ids.join('"].someClass, option[value="') + '"].someClass')
    .remove();

字符串连接和数组连接将以格式给出选择器

"option[value="1"].someClass, option[value="2"].someClass, option[value="3"].someClass"

可以直接与jQuery一起使用。

var arr = [{
  "Title": "SomeTitle",
  "Id": 1
}, {
  "Title": "SomeOtherTitle",
  "Id": 2
}];

var ids = arr.map(o => o.Id);
$('option.someClass')
  .not('option[value="' + ids.join('"].someClass, option[value="') + '"].someClass')
  .remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="1" class="someClass">1</option>
<option value="2" class="someClass">2</option>
<option value="3" class="someClass">3</option>
<option value="4" class="someClass">4</option>
<option value="5" class="someClass">5</option>
</select>