3 Câu hỏi: Làm thế nào để có được đối tượng dựa trên id trong một mảng các đối tượng đa chiều?

câu hỏi được tạo ra tại Thu, May 2, 2019 12:00 AM

Xin chào Tôi đang cố gắng tìm ra cách lấy đối tượng với một id cụ thể từ một mảng với các mức độ đột biến. Mảng sẽ có các đối tượng, các đối tượng này có thể có các mảng với các đối tượng là giá trị. Ví dụ: xem dữ liệu được cung cấp bên dưới:

[
    {
        "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
                    }
                ]
            }
        ]
    }
]

Ở đây cho phép tôi cần lấy đối tượng với id da8b054a-274e-4e1b-9d5a-e058a934838b. Làm cách nào để làm điều đó?

Đây là một hàm recurisve tôi đã viết cho điều này:

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

Điều này khiến trình duyệt không phản hồi và hiển thị lỗi too much recursion.

Ai đó có thể vui lòng giúp tôi với điều này không?

    
1
3 Câu trả lời                              3                         

Bạn có thể thực hiện việc này bằng phương pháp reduce và đặt bộ tích lũy thành phần tử hiện tại nếu id khớp.

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)
    
3
2019-05-02 07: 48: 12Z

Bạn có thể thực hiện cuộc gọi lặp và đệ quy với một mạch ngắn, nếu mục đó được tìm thấy.

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);
    
4
2019-05-02 07: 57: 27Z
  1. Sử dụng [].some với tác dụng phụ là một thực tế tồi. Sử dụng vòng lặp for..of ở đây là thành ngữ hơn nhiều.
    2019-05-02 07: 52: 10Z
  2. @ MadaraUchiha, bây giờ có tốt hơn không?
    2019-05-02 07: 57: 41Z
  3. @ NinaScholz sẽ hoạt động, nếu nó có các menu con sâu 5 cấp?
    2019-05-02 08: 07: 19Z
  4. @ thách thức, nó nên. vui lòng thử với dữ liệu của bạn.
    2019-05-02 08: 09: 48Z
  5. Nó không hoạt động với dữ liệu của tôi. Các câu trả lời khác đã làm. Không biết tại sao nó không hoạt động mặc dù nó hoạt động ở đây.
    2019-05-02 08: 18: 27Z

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);
})
    
0
2019-05-02 07: 53: 19Z
nguồn đặt đây