具有子對象的 object 的過濾器數組

Question

抱歉，如果已經有答案，我一直無法找到對我有用的答案。

我為 React 定義了一個菜單系統，其中信息存儲在一個對象數組中。 每個 object 都有子項（另一個數組中的對象）的可能性，我正在尋找過濾整個菜單的值。

Menu Object

[
  {
    "key": "Dashboard",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "title": "Dashboard",
    "component": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {
        "to": "/admin/",
        "children": "Dashboard"
      },
      "_owner": null,
      "_store": {}
    }
  },
  {
    "key": "Clients",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "isSubMenu": true,
    "title": "Clients",
    "submenus": [
      {
        "key": "Clients.Add",
        "title": "Create Client",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Clients/create",
            "children": "Create Client"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Clients.List",
        "title": "List Clients",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Clients/",
            "children": "List Clients"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Clients.Search",
        "title": "Search Clients",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Clients/search",
            "children": "Search Clients"
          },
          "_owner": null,
          "_store": {}
        }
      }
    ]
  },
  {
    "key": "Contractors",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "isSubMenu": true,
    "title": "Contractors",
    "submenus": [
      {
        "key": "Contractors.Add",
        "title": "Create Contractor",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Contractors/create",
            "children": "Create Contractor"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Contractors.List",
        "title": "List Contractors",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Contractors/",
            "children": "List Contractors"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Contractors.Search",
        "title": "Search Contractors",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Contractors/search",
            "children": "Search Contractors"
          },
          "_owner": null,
          "_store": {}
        }
      }
    ]
  },
  {
    "key": "Jobs",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "isSubMenu": true,
    "title": "Jobs",
    "submenus": [
      {
        "key": "Jobs.Add",
        "title": "Create Job",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Jobs/create",
            "children": "Create Job"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Jobs.List",
        "title": "List Jobs",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Jobs/",
            "children": "List Jobs"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Jobs.Search",
        "title": "Search Jobs",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Jobs/search",
            "children": "Search Jobs"
          },
          "_owner": null,
          "_store": {}
        }
      }
    ]
  },
  {
    "isDivider": true
  },
  {
    "key": "Config",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "isSubMenu": true,
    "title": "Configuration",
    "submenus": [
      {
        "key": "Config.Category.Add",
        "title": "Create Category",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Config/Category/create",
            "children": "Create Category"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Config.Category.List",
        "title": "List Categories",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Config/Category/",
            "children": "List Categories"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Config.Specialist.Add",
        "title": "Create Specialist",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Config/Specialist/create",
            "children": "Create Specialist"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Config.Specialist.List",
        "title": "List Specialists",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Config/Specialist/",
            "children": "List Specialists"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Config.Status.Add",
        "title": "Create Status",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Config/Status/create",
            "children": "Create Status"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Config.Status.List",
        "title": "List Statuses",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Config/Status/",
            "children": "List Statuses"
          },
          "_owner": null,
          "_store": {}
        }
      }
    ]
  },
  {
    "key": "UserManagement",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "isSubMenu": true,
    "title": "User Management",
    "submenus": [
      {
        "key": "UserManagement.Add",
        "title": "Create User",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/UserManagement/create",
            "children": "Create User"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "UserManagement.List",
        "title": "List Users",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/UserManagement/",
            "children": "List Users"
          },
          "_owner": null,
          "_store": {}
        }
      }
    ]
  },
  {
    "isDivider": true
  },
  {
    "key": "LockScreen",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "title": "Lock Screen",
    "component": "Lock Screen"
  }
]

因此，如果我要針對值“列表”的標題過濾它，它應該返回

[
  
  {
    "key": "Clients",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "isSubMenu": true,
    "title": "Clients",
    "submenus": [
      {
        "key": "Clients.List",
        "title": "List Clients",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Clients/",
            "children": "List Clients"
          },
          "_owner": null,
          "_store": {}
        }
      }
    ]
  },
  {
    "key": "Contractors",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "isSubMenu": true,
    "title": "Contractors",
    "submenus": [      
      {
        "key": "Contractors.List",
        "title": "List Contractors",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Contractors/",
            "children": "List Contractors"
          },
          "_owner": null,
          "_store": {}
        }
      },
    ]
  },
  {
    "key": "Jobs",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "isSubMenu": true,
    "title": "Jobs",
    "submenus": [
      {
        "key": "Jobs.List",
        "title": "List Jobs",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Jobs/",
            "children": "List Jobs"
          },
          "_owner": null,
          "_store": {}
        }
      },
      
    ]
  },  
  {
    "key": "Config",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "isSubMenu": true,
    "title": "Configuration",
    "submenus": [
      {
        "key": "Config.Category.List",
        "title": "List Categories",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Config/Category/",
            "children": "List Categories"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Config.Specialist.List",
        "title": "List Specialists",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Config/Specialist/",
            "children": "List Specialists"
          },
          "_owner": null,
          "_store": {}
        }
      },
      {
        "key": "Config.Status.List",
        "title": "List Statuses",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/Config/Status/",
            "children": "List Statuses"
          },
          "_owner": null,
          "_store": {}
        }
      }
    ]
  },
  {
    "key": "UserManagement",
    "icon": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {},
      "_owner": null,
      "_store": {}
    },
    "isSubMenu": true,
    "title": "User Management",
    "submenus": [
      {
        "key": "UserManagement.List",
        "title": "List Users",
        "component": {
          "type": {},
          "key": null,
          "ref": null,
          "props": {
            "to": "/admin/UserManagement/",
            "children": "List Users"
          },
          "_owner": null,
          "_store": {}
        }
      }
    ]
  }
]

或者它應該返回

[
  

  {
    "key": "Clients.List",
    "title": "List Clients",
    "component": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {
        "to": "/admin/Clients/",
        "children": "List Clients"
      },
      "_owner": null,
      "_store": {}
    }
  },
    
  {
    "key": "Contractors.List",
    "title": "List Contractors",
    "component": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {
        "to": "/admin/Contractors/",
        "children": "List Contractors"
      },
      "_owner": null,
      "_store": {}
    }
  },

  {
    "key": "Jobs.List",
    "title": "List Jobs",
    "component": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {
        "to": "/admin/Jobs/",
        "children": "List Jobs"
      },
      "_owner": null,
      "_store": {}
    }
  },
  
  {
    "key": "Config.Category.List",
    "title": "List Categories",
    "component": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {
        "to": "/admin/Config/Category/",
        "children": "List Categories"
      },
      "_owner": null,
      "_store": {}
    }
  },
  {
    "key": "Config.Specialist.List",
    "title": "List Specialists",
    "component": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {
        "to": "/admin/Config/Specialist/",
        "children": "List Specialists"
      },
      "_owner": null,
      "_store": {}
    }
  },
  {
    "key": "Config.Status.List",
    "title": "List Statuses",
    "component": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {
        "to": "/admin/Config/Status/",
        "children": "List Statuses"
      },
      "_owner": null,
      "_store": {}
    }
  }, 
  {
    "key": "UserManagement.List",
    "title": "List Users",
    "component": {
      "type": {},
      "key": null,
      "ref": null,
      "props": {
        "to": "/admin/UserManagement/",
        "children": "List Users"
      },
      "_owner": null,
      "_store": {}
    }
  }
]

目前我有以下適用於第一級對象的內容，但子菜單全部返回：

const MenuSearch = (value) => {
        const SearchTerm = value.toLowerCase();
        console.log(SearchTerm, MenuItems);
        if (!value || value.length < 1){
            // show all menu items
            SetMenuItemsFiltered(MenuItems);   
        } else {
            let temp = [...MenuItems];

            SetMenuItemsFiltered(temp.filter((MenuItem) => {
                if (!MenuItem.isSubMenu && !MenuItem.isDivider){
                    return MenuItem.title.toLowerCase().includes(SearchTerm);
                } else if (MenuItem.isSubMenu){
                    return MenuItem.submenus.filter((SubMenuItem) => {
                        const SubMenuItemLabel = SubMenuItem.title.toLowerCase();
                        console.log(SubMenuItemLabel, SearchTerm, SubMenuItemLabel.includes(SearchTerm))
                        return SubMenuItemLabel.includes(SearchTerm.toLowerCase());
                    })
                }
            }));
        }
    }

Answer 1

. ~ .~value.length中的 ~ 只是我說“不要從 -1 開始並認為它是 0”的首選方式

const MenuSearch = (value) => {
  const searchWord = value.toLowerCase();

  if (!value || !~value.length) {
    // early return.
    return SetMenuItemsFiltered(MenuItems);
  }

  const result = data.reduce((prev, curr) => {
    const title = curr.title?.toLowerCase();

    if (!curr.submenus && !curr.isDivider) {
      if (title.includes(searchWord)) {
        return prev.concat(curr);
      }
    }

    if (curr.isSubMenu) {
      return prev.concat(
        curr.submenus.filter((item) =>
          item.title.toLowerCase().includes(searchWord)
        ),
      );
    }

    return prev;
  }, []);

  SetMenuItemsFiltered(result);
};

我想這就是你要找的：

const objectsFilter = require("objectsfilter");
const data = require("./data.json");

const MenuSearch = (value) => {
  const searchWord = value.toLowerCase();

  if (!value || !~value.length) {
    // early return.
    return SetMenuItemsFiltered(MenuItems);
  }

  const result = data.reduce((prev, curr) => {
    const title = curr.title?.toLowerCase();

    if (!curr.submenus && !curr.isDivider) {
      if (title.includes(searchWord)) {
        return prev.concat(curr);
      }
    }

    if (curr.isSubMenu) {
      const submenus = [];

      objectsFilter.objectsForEach(curr, (currentItem, key) => {
        if (key === "submenus") {
          submenus.push(
            currentItem.filter((item) =>
              item.title.toLowerCase().includes(searchWord)
            ),
          );
        }
      });

      return prev.concat({
        ...curr,
        submenus,
      });
    }

    return prev;
  }, []);


  SetMenuItemsFiltered(result);
};

對象過濾器： https://github.com/Meno-101/objectsfilter

npm: https://www.npmjs.com/package/objectsfilter

Answer 2

問題是您正在過濾MenuItem.submenus但不存儲過濾后的值。 相反，您只是返回整個MenuItem.submenu

所以應該是

MenuItem.submenus= MenuItem.submenus.filter((SubMenuItem) => { 
  const SubMenuItemLabel = SubMenuItem.title.toLowerCase(); 
  return SubMenuItemLabel.includes(SearchTerm.toLowerCase());
 })

如果MenuItem.submenus.length>0則返回 true。

所以最終代碼是

 temp.filter((MenuItem) => {
   if (!MenuItem.isSubMenu && !MenuItem.isDivider){
       return MenuItem.title.toLowerCase().includes(SearchTerm);
   } else if (MenuItem.isSubMenu){
       MenuItem.submenus= MenuItem.submenus.filter((SubMenuItem) => {
         const SubMenuItemLabel = SubMenuItem.title.toLowerCase();
         console.log(SubMenuItemLabel, SearchTerm, 
         SubMenuItemLabel.includes(SearchTerm))
         return SubMenuItemLabel.includes(SearchTerm.toLowerCase());
        })
     return MenuItem.submenus.length;
   }
})

Answer 3

我最終對此采取了不同的方法，而不是返回過濾器，我會使用過濾器創建一個新的匹配對象數組。 我已經在這里發布了答案，但會繼續檢查是否有人提出更好的解決方案。

const MenuSearch = (value) => {
        const SearchTerm = value.toLowerCase();
        if (!value || value.length < 1){
            // show all menu items
            SetMenuItemsFiltered(MenuItems);   
        } else {
            let FilteredItems = [];

            // filter the data
            MenuItems.filter((MenuItem) => {
                if (!MenuItem.isSubMenu && !MenuItem.isDivider){
                    if (MenuItem.title.toLowerCase().includes(SearchTerm)){
                        FilteredItems.push(MenuItem);
                    }
                    //return MenuItem.title.toLowerCase().includes(SearchTerm);
                } else if (MenuItem.isSubMenu){
                    MenuItem.submenus.filter((SubMenuItem) => {
                        const SubMenuItemLabel = SubMenuItem.title.toLowerCase();
                        // return SubMenuItemLabel.includes(SearchTerm);
                        if (SubMenuItemLabel.includes(SearchTerm)){
                            FilteredItems.push(SubMenuItem);
                        }
                    })
                }
            });

            SetMenuItemsFiltered(FilteredItems);
        }
    }