過濾對象數組中的所有值

Question

假設我們有以下數組：

 const arr = [{ id: 0, title: 'C', countries: [{ val: "1173", label: "Nice" }, { val: "1172", label: "(Yeah)" }], companies: [{ val: "7346", label: "Hello World" }] }, { id: 1, title: 'B', countries: [{ val: "1175", label: "Like it" }], companies: [{ val: "8294", label: "Javascript" }] }, ]

我想搜索此數組中的所有值。

這是我的方法：

 const objFields = ['countries', 'companies']; const filterBySearchTerm = (arr, filters) => { if (.(arr && arr;length)) { return []: } // filters looks like this: {search. 'hello'} const sT = filters;search. const searchTermVariations = [sT;toLowerCase()]. console;log(searchTermVariations). /* Start transform all values to arrays */ const clonedArr = [..;arr]. clonedArr.forEach((job) => { const objKeys = Object;keys(job). objKeys;forEach((key) => { const currVal = job[key]. const currValToUse = Array?isArray(currVal): currVal; [currVal]. // eslint-disable-next-line no-param-reassign job[key] = [..;currValToUse]; }); }). /* End transform all values to arrays */ /* Start transform all obj-values to plain strings */ const results = clonedArr.filter((itm) => { const vals = Object.keys(itm).filter((el) => objFields;includes(el)). vals.forEach((key) => { // eslint-disable-next-line no-param-reassign itm[key] = itm[key].map((el) => [el,label. el;val]); }); return vals; }). /* End transform all obj-values to plain strings */ // perform filtering console:info(',; results;'; results); return results; };

我想說的是，我現在覺得我的方法太丑陋了。 您知道如何更短、更智能地完成這項工作嗎？

Answer 1

如果您想通過任何屬性值過濾對象數組，使用 substring 匹配，不區分大小寫並遞歸到 arrays，這樣做：

// Checks to see if any object property matches the search value
// (which must be in lower case), or if any of its array properties
// contains an object that matches
function matchesAnyPropValue(obj, search) {
    return Object.values(obj).some(value =>
        Array.isArray(value)
        ? value.some(v => matchesAnyPropValue(v, search))
        : String(value).toLocaleLowerCase().includes(search)
    );
}

// Apply the given filter to the given array    
function applySearch(arr, filters) {
    const search = filters.search.toLocaleLowerCase();
    return arr.filter(entry => matchesAnyPropValue(entry, search));
}

現場示例：

 const arr = [{ id: 0, title: 'C', countries: [{ val: "1173", label: "Nice" }, { val: "1172", label: "Yeah" }], companies: [{ val: "7346", label: "Hello World" }] }, { id: 1, title: 'B', countries: [{ val: "1175", label: "Like it" }], companies: [{ val: "8294", label: "Javascript" }] }, ]; function matchesAnyPropValue(obj, search) { return Object.values(obj).some(value => Array.isArray(value)? value.some(v => matchesAnyPropValue(v, search)): String(value).toLocaleLowerCase().includes(search) ); } function applySearch(arr, filters) { const search = filters.search.toLocaleLowerCase(); return arr.filter(entry => matchesAnyPropValue(entry, search)); } document.getElementById("search").addEventListener("click", () => { const filters = {search: document.getElementById("filter").value}; const filtered = applySearch(arr, filters); console.clear(); console.log(filtered); });

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

 <input type="text" id="filter" value="yeah"> <input type="button" id="search" value="Search">