使用 Jquery Each 在 Javascript 对象和数组中查找匹配项

Question

尝试使用过滤器数组来搜索商店位置的 javascript 对象，我需要使用过滤器数组中的两个过滤器获得完全匹配，该数组现在有 2 个项目，但会有更多。下面的代码有效，但它正在为每个商店查找匹配项。由于 .json 文件中的一个商店没有 ATM 机，因此不应出现在控制台中。任何帮助将不胜感激！

.json:

[
{
    "storenumber": "5210",
    "services": [
        {
            "img": "/locator/img/icons/atm.svg",
            "alt": "ATM Machine"
        },
        {
            "img": "/locator/img/icons/carwash.svg",
            "alt": "Car Wash"
        }
    ]
},
{
    "storenumber": "1066",
    "services": [
        {
            "img": "/locator/img/icons/carwash.svg",
            "alt": "Car Wash"
        }

    ]
}
]

.js:

var jsonData,
    filteredJsonData = [],
    filters = ["Car Wash","ATM Machine"];

   $.getJSON("/locator/js/locations.json")
    .done(function(data) {
        jsonData = data;

        $.each(jsonData,function(locationsIndex,locationsItem){
            var services = locationsItem.services;

            $.each(services,function(servicesIndex,servicesItem){
                if (servicesItem.alt && ($.inArray(servicesItem.alt,filters) != -1)) {
                    // This is finding matches in the filters array, but i need to match all items in the array
                    console.log("Match Found: " + servicesItem.alt + " at Index " + locationsIndex)
                    filteredJsonData.push(locationsItem)
                }
            })
        })  
        console.log(filteredJsonData)
    })

Answer 1

您可以使用filter、some 和Set 的组合：

const jsonData = [{"storenumber": "5210","services": [{ "img": "/locator/img/icons/atm.svg","alt": "ATM Machine"},{"img": "/locator/img/icons/carwash.svg","alt": "Car Wash"}]}, {"storenumber": "1066","services": [{"img": "/locator/img/icons/carwash.svg","alt": "Car Wash"}]}],
    filters = ["Car Wash","ATM Machine"];

const locations = jsonData.filter( location => {
    const filterSet = new Set(filters);
    return location.services.some( service => {
        filterSet.delete(service.alt);
        return !filterSet.size;
    });
});
console.log(locations);

.as-console-wrapper { max-height: 100% !important; top: 0; }

注意：我删除 Ajax 调用只是为了演示 sn-p。

对于旧版浏览器

一个适用于旧浏览器（ES3，主要是 IE）的版本，使用 jQuery：

var jsonData = [{"storenumber": "5210","services": [{ "img": "/locator/img/icons/atm.svg","alt": "ATM Machine"},{"img": "/locator/img/icons/carwash.svg","alt": "Car Wash"}]}, {"storenumber": "1066","services": [{"img": "/locator/img/icons/carwash.svg","alt": "Car Wash"}]}],
    filters = ["Car Wash","ATM Machine"];

var locations = $.grep(jsonData, function (location) {
    var filterSet = {};
    for (var i = 0; i < filters.length; i++) {
        filterSet[filters[i]] = 1;
    }
    var filtersLeft = filters.length;
    $.each(location.services, function (i, service) {
        if (filterSet[service.alt]) {
            filtersLeft--;
            filterSet[service.alt] = 0; 
        };
        return filtersLeft > 0;
    });
    return filtersLeft === 0;
});
console.log(locations);

.as-console-wrapper { max-height: 100% !important; top: 0; }

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