javascript - 如何根据多维对象数组中的id获取对象?
问题描述
您好我想弄清楚如何从具有多个级别的数组中获取具有特定 id 的对象。该数组将包含对象,这些对象可能具有以对象为值的数组。例如看下面给出的数据:
[
{
"id": "e1f015d3-4ca8-4dfd-839d-bed9bbbb82f8",
"text": "Parent Menu 2",
"icon": "e1f015d3-4ca8-4dfd-839d-bed9bbbb82f8/rose-3142529__340.jpg",
"page_type": "parent_menu",
"data": "e1f015d3-4ca8-4dfd-839d-bed9bbbb82f8",
"ui_config": "",
"order": 2
},
{
"id": "5bc4ff1a-69b5-496b-a484-0aa99b886122",
"text": "Home",
"icon": "5bc4ff1a-69b5-496b-a484-0aa99b886122/1024x1024.png",
"page_type": "parent_menu",
"is_homepage": true,
"data": "5bc4ff1a-69b5-496b-a484-0aa99b886122",
"ui_config": "",
"order": 1,
"submenus": [
{
"id": "4960a54c-6d27-4d8d-a272-ebc7d9e8a55e",
"text": "Grid Menu",
"icon": "4960a54c-6d27-4d8d-a272-ebc7d9e8a55e/rose-3142529__340.jpg",
"page_type": "grid_menu",
"data": "4960a54c-6d27-4d8d-a272-ebc7d9e8a55e",
"ui_config": "",
"order": 1,
"submenus": [
{
"id": "906cd86f-df57-4175-a2c6-ca3a5c724e8a",
"text": "Article Page 2",
"icon": "906cd86f-df57-4175-a2c6-ca3a5c724e8a/rose-3142529__340.jpg",
"page_type": "article_page",
"data": "{\"page_id\":\"3e025c87-1d03-46a6-800e-0a9daea52bf4\"}",
"ui_config": "",
"order": 2
},
{
"id": "da8b054a-274e-4e1b-9d5a-e058a934838b",
"text": "Article Page",
"icon": "da8b054a-274e-4e1b-9d5a-e058a934838b/rose-3142529__340.jpg",
"page_type": "article_page",
"data": "{\"page_id\":\"3e025c87-1d03-46a6-800e-0a9daea52bf4\"}",
"ui_config": "",
"order": 1
}
]
}
]
}
]
这里假设我需要使用 id 获取对象da8b054a-274e-4e1b-9d5a-e058a934838b
。我怎么做?
这是我为此编写的递归函数:
var currentMenuItem = null
function getTheCurrentMenu(menu, id) {
if (currentMenuItem != null) {
return
}
if (!Array.isArray(menu)) {
if (menu.id == id) {
currentMenuItem = menu
return
}
}
for (var item in menu) {
console.log(item)
getTheCurrentMenu(item, id)
}
}
这会使浏览器无响应并显示错误too much recursion
。
有人可以帮我吗?
解决方案
如果找到该项目,您可以通过短路进行迭代和递归调用。
function find(array, id) {
var item;
for (item of array) {
if (item.id === id) return item;
if (item.submenus && (item = find(item.submenus, id))) return item;
}
}
var data = [{ id: "e1f015d3-4ca8-4dfd-839d-bed9bbbb82f8", text: "Parent Menu 2", icon: "e1f015d3-4ca8-4dfd-839d-bed9bbbb82f8/rose-3142529__340.jpg", page_type: "parent_menu", data: "e1f015d3-4ca8-4dfd-839d-bed9bbbb82f8", ui_config: "", order: 2 }, { id: "5bc4ff1a-69b5-496b-a484-0aa99b886122", text: "Home", icon: "5bc4ff1a-69b5-496b-a484-0aa99b886122/1024x1024.png", page_type: "parent_menu", is_homepage: true, data: "5bc4ff1a-69b5-496b-a484-0aa99b886122", ui_config: "", order: 1, submenus: [{ id: "4960a54c-6d27-4d8d-a272-ebc7d9e8a55e", text: "Grid Menu", icon: "4960a54c-6d27-4d8d-a272-ebc7d9e8a55e/rose-3142529__340.jpg", page_type: "grid_menu", data: "4960a54c-6d27-4d8d-a272-ebc7d9e8a55e", ui_config: "", order: 1, submenus: [{ id: "906cd86f-df57-4175-a2c6-ca3a5c724e8a", text: "Article Page 2", icon: "906cd86f-df57-4175-a2c6-ca3a5c724e8a/rose-3142529__340.jpg", page_type: "article_page", data: "{\"page_id\":\"3e025c87-1d03-46a6-800e-0a9daea52bf4\"}", ui_config: "", order: 2 }, { id: "da8b054a-274e-4e1b-9d5a-e058a934838b", text: "Article Page", icon: "da8b054a-274e-4e1b-9d5a-e058a934838b/rose-3142529__340.jpg", page_type: "article_page", data: "{\"page_id\":\"3e025c87-1d03-46a6-800e-0a9daea52bf4\"}", ui_config: "", order: 1 }] }] }],
id = 'da8b054a-274e-4e1b-9d5a-e058a934838b',
result = find(data, id);
console.log(result);
推荐阅读
- php - Laravel在ManyToMany中获取哪些类别属于登录用户
- c# - 为什么 .ToPagedList 工作得这么慢?
- altair - 如何根据 Altair 图表中的选择对值进行排序?
- php - 使用 csp 标头安全地将 html 表单提交/重定向到 validation.php 的最佳方法?
- javascript - 无法通过 $.post() 将数据发送到 php 脚本
- angular - RxJS - 如何在不使用间隔的情况下逐步增加延迟时间?
- ios - SwiftUI List NavigationView onDelete 警报确认有丑陋的动画
- pine-script - 不能使用可变变量作为安全函数的参数
- javascript - 替换内置日期而无法恢复原始构造函数
- kubernetes - 为什么 Kubernetes 会为我的节点设置磁盘压力污染?