如何基于对象的多维数组中的id获取对象？

时间：2019-05-02 07:35:12

标签： javascript recursion

您好，我试图找出如何从具有多个级别的数组中获取具有特定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的对象。我该怎么办？

这是我为此编写的一个resursve函数：

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。

有人可以帮我吗？

3 个答案:

答案 0 :(得分：4)

如果找到该项目，则可以短路进行迭代和递归调用。

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);

答案 1 :(得分：3)

您可以使用reduce方法执行此操作，如果id匹配，则将累加器设置为当前元素。

const 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}]}]}]

function get(data, id) {
  return data.reduce((r, e) => {
    if(e.id === id) r = e;
    if(!r && e.submenus) return get(e.submenus, id)
    return r;
  }, null)
}

const result = get(data, 'da8b054a-274e-4e1b-9d5a-e058a934838b');
console.log(result)

答案 2 :(得分：0)

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",
                        "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",
                        "ui_config": "",
                        "order": 1
                    }
                ]
            }
        ]
    }
]`;


var menu = JSON.parse(data);

async function getTheCurrentMenu(menu, id) {
  if (!Array.isArray(menu)) {
    if (menu.id == id) {
      return menu;
    } else if(menu.submenus){
      return getTheCurrentMenu(menu.submenus, id);
    } else {
      return;
    }
  }
  for (let item of menu) {
    console.log(item)
    let result = await getTheCurrentMenu(item, id);
    if(result != null) {
      return result;
    }
  }
}

getTheCurrentMenu(menu, 'da8b054a-274e-4e1b-9d5a-e058a934838b').then((item) => {
  console.log("Result: ", item);
})

相关问题
最新问题