在多個級別過濾嵌套的對象數組並取回數組中的匹配對象

Question

我正在尋找修復我當前的 function 搜索所有可能的匹配項並提供整個嵌套數組，但它適用於一個級別。

我正在嘗試使用過濾器並通過循環搜索所有屬性。

不知何故，它不適用於所有場景。

 data = [ { id: "m1", name: "data1", val: "D", items: [ { id: "d1", name: "datanested1", val: "D", items: [ { id: "1", name: "direct Data", val: "E" }, { id: "2", name: "test", val: "E" } ] } ] }, { id: "d2", name: "data2", val: "D", items: [ { id: "21", name: "test21", val: "E" }, { id: "22", name: "test23", val: "E" } ] }, { id: "d3", name: "data23", val: "D", items: [ { id: "31", name: "test data 3", val: "E" }, { id: "32", name: "test data 4", val: "E" } ] } ]; function getFilteredData(searchText) { return data.filter(item => { return Object.keys(item).some(key => { return String(item[key]).toLowerCase().includes(searchText.toLowerCase()); }); }); } console.log("data search level1", getFilteredData("data")); //expected output // [ // { // id: "m1", // name: "data1", // val: "D", // items: [ // { // id: "d1", // name: "datanested1", // val: "D", // items: [ // { // id: "1", // name: "direct Data", // val: "E" // }, // { // id: "2", // name: "B Data", // val: "E" // } // ] // } // ] // }, // { // id: "d2", // name: "data2", // val: "D", // items: [ // { // id: "21", // name: "test21", // val: "E" // }, // { // id: "22", // name: "test23", // val: "E" // } // ] // }, // { // id: "d3", // name: "data23", // val: "D", // items: [ // { // id: "31", // name: "test data 3", // val: "E" // }, // { // id: "32", // name: "test data 4", // val: "E" // } // ] // } // ]; console.log("data search level2", getFilteredData("datanested1")); //expected output // { // id: "m1", // name: "data1", // val: "D", // items: [ // { // id: "d1", // name: "datanested1", // val: "D", // items: [ // { // id: "1", // name: "direct Data", // val: "E" // }, // { // id: "2", // name: "B Data", // val: "E" // } // ] // } // ] // } console.log("data search level3", getFilteredData("direct")); //expected output // { // id: "m1", // name: "data1", // val: "D", // items: [ // { // id: "d1", // name: "datanested1", // val: "D", // items: [ // { // id: "1", // name: "direct Data", // val: "E" // }, // ] // } // ] // } console.log("data search level2 common", getFilteredData("test")); //expected output // [ // { // id: "d2", // name: "data2", // val: "D", // items: [ // { // id: "21", // name: "test21", // val: "E" // }, // { // id: "22", // name: "test23", // val: "E" // } // ] // }, // { // id: "d3", // name: "data23", // val: "D", // items: [ // { // id: "31", // name: "test data 3", // val: "E" // }, // { // id: "32", // name: "test data 4", // val: "E" // } // ] // } // ]; console.log("data search level1 common", getFilteredData("2")); // [ // { // id: "m1", // name: "data1", // val: "D", // items: [ // { // id: "d1", // name: "datanested1", // val: "D", // { // id: "2", // name: "test", // val: "E" // } // ] // } // ] // }, // { // id: "d2", // name: "data2", // val: "D", // items: [ // { // id: "21", // name: "test21", // val: "E" // }, // { // id: "22", // name: "test23", // val: "E" // } // ] // }, // { // id: "d3", // name: "data23", // val: "D", // { // id: "32", // name: "test data 4", // val: "E" // } // ] // } // ];

下面是我正在嘗試的stackblitz。

https://stackblitz.com/edit/js-1noseg

Answer 1

您可以采用 function ，它采用一個數組或以后的items ，並返回一個數組，其中包含包含所需值的對象，或者什么都沒有。

 const getFilteredData = (array, value) => array.reduce((r, o) => { let { items = [], ...rest } = o, values = Object.values(rest); if (values.some(v => v.toString().includes(value))) { r.push(o); } else { items = getFilteredData(items, value); if (items.length) r.push({...o, items }); } return r; }, []), data = [{ id: "m1", name: "data1", val: "D", items: [{ id: "d1", name: "datanested1", val: "D", items: [{ id: "1", name: "direct Data", val: "E" }, { id: "2", name: "test", val: "E" }] }] }, { id: "d2", name: "data2", val: "D", items: [{ id: "21", name: "test21", val: "E" }, { id: "22", name: "test23", val: "E" }] }, { id: "d3", name: "data23", val: "D", items: [{ id: "31", name: "test data 3", val: "E" }, { id: "32", name: "test data 4", val: "E" }] }], testdata = [{ id: "d3", name: "data23", val: "D", items: [ { id: "31", name: "b", val: "E" }, { id: "32", name: "c", val: "E" } ] }]; console.log("data", getFilteredData(data, "data")); console.log("datanested1", getFilteredData(data, "datanested1")); console.log("direct", getFilteredData(data, "direct")); console.log("test", getFilteredData(data, "test")); console.log("2", getFilteredData(data, "2")); console.log("testdata", getFilteredData(testdata, "b"));

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