I have data that looks likem that is of type IconItems:

{
  title: "Category title",
  description: "Example description",
  lists: [
    {
      id: "popular",
      title: "Popular",
      items: [
        {
          id: 1,
          title: "title",
          provider: "provider",
          image: ""
        },
      ....
      ]
    },
    {
      id: "new",
      title: "New",
      items: [
        {
          id: 4,
          title: "studioss2",
          provider: "provider",
          image: ""
        },
       ....
      ]
    } 

I want to filter the nestled items (type IconItem, in singular) array based on a string value.

For this I have defined these two values:

const filterKeyOpt: Array<keyof IconItem> = ["title", "provider", "image"];
const searchQuery = 'sTudioSS'

I try to filter out the data

const logData = () => {
     let filteredData = data?.lists.map((item) => item.items.filter((i) => {
      return filterKeyOpt.some((key) => i[key].toString().toLowerCase().includes(searchQuery.toLowerCase()))
    } /// returns  IconItem[][] | undefined but I want to return type IIconItems | undefined
    ))
console.log(filteredData)
}

But the output is of type

IconItem[][]

But I want the full thing/type. Ie. filter out on a nestled value and give back a copy of the data object, with matching properties. How to do that?

Playground link: https://www.typescriptlang.org/play?ssl=69&ssc=32&pln=69&pc=20#code/MYewdgzgLgBAJgQyggXASTaMaoFMC2EMAvDAN4BQMMUAllADa4owBEAwkrgOYgBOATxr0mrADRV4uCMD60ADnXAtWAUQAeCfPKZSZcxbXDjJDWtAgsA2pOqVqDmLTgr5IeQFcGCPicfU6RmY2AAV3Lx8-f3oCSxgbfwd7RIdnFgBGCRSHQKYVXNwo7Pk EAA3Z1w V1KKuCqilNp8BG5g1lZbfwBfLJTk7LSYACY 7IL8kVxhxsSS8srqtmgPOCMIDdnolraVTuzuruoAXS7eroHUlzYwXAB3LYm2ADl7rZjCayOk78chgBYxiknqwCv8to55nUqjUFvVfEDEs1Wu19ilztlLkjrqNfjkppMggBWCEOKGLFQIvHUZG7NhoxKHRKnRxMmCnboAbgoFFoYDwfAAZghgLgYBgsDhYuRJE9oHIwNxudR6voFEowCx5XylaZzFA4hLwFL8FZjtzDrz VVhaLxZhjXh8DKaddtYrlcIglqoArdTSnYbJU6zRaeXyBbaxQ7sE6XU5rmAPPgAEZVT1y306z3k E v2e2nBd26y1YaAwQW0BgCgDSuAEAHlFCwAIJ8PgIAQAHgA1g2QILxcGCAA EjxUFTcRsXMNMRsIusc0UcuwCC4HzAAAWAEUPFUhKQAOQQAAqqyMAGUr8eeWuYAwQNwACJIBATgAUAEoSOOsUwsBVjWVS4HAb7IBOiDIAA-AAdGYFhwS08ifp Hy-sQ44fHBHwQHBwECmhtCYf 3x8LgUAeHwYCVtWdYNs2UBwRAID4LgaH9gIpFOFYXHHHBUAgFeWaKj gkgAAMiAdxVJwG7iXywAMKs0ifhuW57geggSdJsl8PJHHfsZZwwAA9BZMAUVRNFEMOjoEGaZowAAPjAHhgPUVa3HAMAph4sBoDAdwIPyNAgFZlHUbRUACPI0YxiaRBuR5Xl8mBXQmeWIBMAhz6foRoHge 34UJaT6vu P7ckAA

CodePudding user response：

Playground

const logData = () => {
  let a: typeof data = {
    ...data,
    lists: data.lists.map(list => {
      //                  ^?
      return { // only matching items
        ...list,
        items: list.items.filter(item => {
          //                     ^?
          filterKeyOpt.some((key) => item[key].toString().toLowerCase().includes(searchQuery.toLowerCase()))
        })
      }
    }).filter(list => {
      // only non-empty lists
      return list.items.length
    })
  }
  return a.lists.length ? a : undefined;
}