javascript - 如何根据嵌套对象数组的对象搜索输入查找所有匹配值

Question

我正在寻找建议并修复我的功能。

我有一个函数来查找具有嵌套对象数组的对象数组的所有可能匹配项。

我尝试添加过滤器功能，但它只为我提供第一级匹配的关键字，之后它就停止了。

反正我可以搜索多个级别吗？

我尝试了以下方法。

const data = [
  {
    name: "testmapping",
    items: [
      {
        name: "lv2test1mapping",
        items: [
          { name: "lv3test1mapping" },
          { name: "lv3test2mapping" },
          { name: "lv3test3mapping" }
        ]
      },
      {
        name: "lv2test2mapping"
      },
      {
        name: "lv2test3mapping"
      }
    ]
  },
  {
    name: "test2mapping",
    items: [
      {
        name: "lv2test21mapping",
        items: [
          { name: "lv3test21mapping" },
          { name: "lv3test22mapping" },
          { name: "lv3test23mapping" }
        ]
      },
      {
        name: "lv2test22mapping"
      },
      {
        name: "lv2test23mapping"
      }
    ]
  }
];

function getvalue(searchText) {
  return data.filter(item => {
    return Object.keys(item).some(key => {
      return String(item[key])
        .toLowerCase()
        .includes(searchText.toLowerCase());
    });
  });
}

console.log("one level", getvalue("test"));
//output
[
   {
      "name":"testmapping",
      "items":[
         {
            "name":"lv2test1mapping",
            "items":[
               {
                  "name":"lv3test1mapping"
               },
               {
                  "name":"lv3test2mapping"
               },
               {
                  "name":"lv3test3mapping"
               }
            ]
         },
         {
            "name":"lv2test2mapping"
         },
         {
            "name":"lv2test3mapping"
         }
      ]
   },
   {
      "name":"test2mapping",
      "items":[
         {
            "name":"lv2test21mapping",
            "items":[
               {
                  "name":"lv3test21mapping"
               },
               {
                  "name":"lv3test22mapping"
               },
               {
                  "name":"lv3test23mapping"
               }
            ]
         },
         {
            "name":"lv2test22mapping"
         },
         {
            "name":"lv2test23mapping"
         }
      ]
   }
]
console.log("second level", getvalue("lv2"));
//expected output
[
   {
      "name":"lv2test1mapping",
      "items":[
         {
            "name":"lv3test1mapping"
         },
         {
            "name":"lv3test2mapping"
         },
         {
            "name":"lv3test3mapping"
         }
      ]
   },
   {
      "name":"lv2test2mapping"
   },
   {
      "name":"lv2test3mapping"
   },
   {
      "name":"lv2test21mapping",
      "items":[
         {
            "name":"lv3test21mapping"
         },
         {
            "name":"lv3test22mapping"
         },
         {
            "name":"lv3test23mapping"
         }
      ]
   },
   {
      "name":"lv2test22mapping"
   },
   {
      "name":"lv2test23mapping"
   }
]

console.log("third level", getvalue("lv3"));
//expected output

[
   {
      "name":"lv3test1mapping"
   },
   {
      "name":"lv3test2mapping"
   },
   {
      "name":"lv3test3mapping"
   },
   {
      "name":"lv3test21mapping"
   },
   {
      "name":"lv3test22mapping"
   },
   {
      "name":"lv3test23mapping"
   }
]

https://stackblitz.com/edit/js-ydnhcg?file=index.js

标签： javascriptarraystypescriptfiltermatch

Answer 1

const data = [
  {
    name: "testmapping",
    items: [
      {
        name: "lv2test1mapping",
        items: [
          { name: "lv3test1mapping" },
          { name: "lv3test2mapping" },
          { name: "lv3test3mapping" }
        ]
      },
      {
        name: "lv2test2mapping"
      },
      {
        name: "lv2test3mapping"
      }
    ]
  },
  {
    name: "test2mapping",
    items: [
      {
        name: "lv2test21mapping",
        items: [
          { name: "lv3test21mapping" },
          { name: "lv3test22mapping" },
          { name: "lv3test23mapping" }
        ]
      },
      {
        name: "lv2test22mapping"
      },
      {
        name: "lv2test23mapping"
      }
    ]
  }
];


function getValue(searchText) {
  const localData = [...data];
  function getValueLogic(data, searchText) {
    const arr = [];
    if (data && Array.isArray(data)) {
      for (let i = 0; i < data.length; i++) {
        const ele = data[i];
        ele && ele.name.includes(searchText)
          ? arr.push(ele)
          : arr.push(...getValueLogic(ele.items, searchText));
      }
    }
    return arr;
  }
  return getValueLogic(localData, searchText);
}



console.log("one level", getValue("test"));
console.log("second level", getValue("lv2"));
console.log("third level", getValue("lv3"));
console.log("Actual Data", data);

Recursion是关键！以下功能应满足您的要求。

const data = [...] //your data

function getValue(searchText) {
  const localData = [...data];
  function getValueLogic(data, searchText) {
    const arr = [];
    if (data && Array.isArray(data)) {
      for (let i = 0; i < data.length; i++) {
        const ele = data[i];
        ele && ele.name.includes(searchText)
          ? arr.push(ele)
          : arr.push(...getValueLogic(ele.items, searchText));
      }
    }
    return arr;
  }
  return getValueLogic(localData, searchText);
}



console.log("one level", getValue("test"));
console.log("second level", getValue("lv2"));
console.log("third level", getValue("lv3"));
console.log("Actual Data", data);