比較和過濾來自多個陣列的資料

目前，我正在構建一個搜索應用程式，該應用程式根據商店功能（自定義分類）ID 搜索/過濾商店（自定義帖子型別）。最初，我嘗試使用查詢字串過濾資料，但我找不到接收精確匹配的方法，因為您不能在查詢字串中使用 && 。

商店的特征的例子：
流行- ID 12
洗車- ID 22
德利- ID 36
啤酒- ID 54
ATM - ID 98個

存盤：
存盤一個存盤的功能：54，98， 22
存盤兩個存盤的功能：54，55，36
存盤三個商店的功能：98，55，12

我正在尋找的示例：僅顯示包含 54 和 98 id（商店一）的商店。不幸的是，由于我不能在查詢字串中使用 && ，因此它將回傳物件中所有三個存盤的陣列。注意：我有大約 50 家商店和 30 種不同的商店功能。

我認為最好的方法是遍歷回傳的商店并將請求的商店功能 ID 與每個單獨商店的所有商店功能 ID 進行比較。問題是，到目前為止，我發現檢查所有商店功能 ID 是否存在的唯一方法是使用 .includes() 方法。理論上，它有效，但我無法使用它，因為我不知道用戶將尋找哪些商店功能。

    let storeFeatureID = [array of the store features]

    Promise.all([
        fetchData(`http://localhost/wordpress/wp-json/wp/v2/locations/?store-features=${storeFeatureID}`),
// "data" in this instance would return three stores since all three stores have either the id of 54 and 98.
    ]).then((data) => {
        const locationData = data[0];
        allLocations(locationData);
    });
    const allLocations = (data) => {
        // empty object and array
        let storeData = {}, storeArray = [];

        // loops through the object
        for (let i = 0; i < data.length; i  ) {

            let myStoresID = data[i]["store-features"];
// checks to see if the store feature ID is within the array. If so, push the store into an empty array(Store Array) and then push it into the empty object (Store Data)

// need a better way to filter this
            if ( myStoresID.includes(54) && myStoresID.includes(98)){
                console.log('fordata', data[i]);
                storeData = data[i];
                storeArray.push(storeData);
            }
        }

        let location = storeArray;
        let html = "";
        let locationAmmount;
        //calls sorting fuction
        location.sort(dynamicSort("slug"));
        for (let j = 0; j < location.length; j  ) {
            html  = `<li><a href="${location[j].link}">${location[j].title.rendered}</a></li>`;
            locationAmmount = j;
        }
        if (locationAmmount >= 0) {
            locationAmmount  = 1;
            document.getElementById("location-container").innerHTML = html;
            document.getElementById("feature-results").innerHTML = `<h2>Results: ${locationAmmount}</h2>`;
        }
        else {
            document.getElementById("location-container").innerHTML =
                "<h2>Sorry, no results</h2>";
            document.getElementById("feature-results").innerHTML = `<h2>Results: 0</h2>`;
        }
    };

uj5u.com熱心網友回復：

Array.prototype.filter(),Array.prototype.every()和的組合Array.prototype.includes()會讓你到達那里：

const data=[[
{name:"Store One", "store-features":[54, 98, 22]},
{name:"Store Two","store-features":[54, 55, 36]},
{name:"Store Three","store-features":[98, 55, 12]}
]];

let features=[54,22]; // array of required features (can be any length)

console.log(data[0].filter(st=>features.every(f => st["store-features"].includes(f) ) ) );

uj5u.com熱心網友回復：

如果location是實際的 JavaScript 陣列，則可以使用filter(...)

var subarray = location.filter(function(storeID) {
  return storeID.includes(54) && storeID.includes(98);
});

例如，如果您的 storeID 來自復選框，您可以執行以下操作

var subarray = location.filter(function(storeID) {
  const filterIDs = document.querySelectorAll("input[checkbox]:checked");
  for (var i = 0; i < filterIDs.length) {
    if (!storeID.includes(fillterIDs[i].value)) return false;
  }
  return true;
});

標籤：javascript 数组 循环 过滤

上一篇：系數矩陣和回圈挑戰

下一篇：回圈遍歷2個字典并將幾個值附加到一個鍵