基于相同父 ID 组织数据的最佳方式以及如何显示它

Question

我有需要根据相同的父 ID 组织的数据。 我需要做的是列出类别和数据及其各自的类别。 基本上是一个 header（类别），每个 header 下都有按钮（数据）。 数据是一个 JSON 响应，其中响应是 4 个类别，父 ID：0 及其各自的名称和 ID。 响应的 rest 是每个类别对应的数据。 非类别数据具有链接到类别 ID 值的父 ID 值。

我不确定组织这些数据的最佳方式以及如何显示它。 提前致谢。

数据：

"data": {
        "categories": [
            {
                "id": 62,
                "parent_id": 0,
                "category_name": "Category 1",
                "category_slug": "category1",
            },
            {
                "id": 60,
                "parent_id": 0,
                "category_name": "Category 2",
                "category_slug": "category2",
            },
            {
                "id": 61,
                "parent_id": 0,
                "category_name": "Category 3",
                "category_slug": "category3",
            },
            {
                "id": 59,
                "parent_id": 0,
                "category_name": "Category 4",
                "category_slug": "category4",
            }
            {
                "id": 1,
                "parent_id": 60,
                "category_name": "Button 1",
                "category_slug": "button1",
            },
            {
                "id": 3,
                "parent_id": 61,
                "category_name": "Button 3",
                "category_slug": "button3",
            },
            {
                "id": 2,
                "parent_id": 59,
                "category_name": "Button 2",
                "category_slug": "button2",
            },
            {
                "id": 4,
                "parent_id": 61,
                "category_name": "Button 4",
                "category_slug": "button4",
            },
            {
                "id": 5,
                "parent_id": 59,
                "category_name": "Button 5",
                "category_slug": "button5",
            },
            {
                "id": 6,
                "parent_id": 61,
                "category_name": "Button 6",
                "category_slug": "button6",
            },
            {
                "id": 7,
                "parent_id": 60,
                "category_name": "Button 7",
                "category_slug": "button7",
            },
            {
                "id": 10,
                "parent_id": 62,
                "category_name": "Button 10",
                "category_slug": "button10",
            },
        ]
    },

Answer 1

您可以使用由id键入的临时Map ，并使用相应对象的值，但每个对象都有一个children属性。 然后填充这些children arrays。 最后从Map中提取对象。

要渲染，您可以使用递归 function 生成嵌套ul 。

看这里：

 function transform(categories) { const map = new Map(categories.map(({id, parent_id, category_name}) => [id, { category_name, children: [] }] )).set(0, { children: [] }); for (const {id, parent_id} of categories) { map.get(parent_id).children.push(map.get(id)); } return [...map.get(0).children]; } function render(ul, tree) { for (const {category_name, children} of tree) { const li = document.createElement("li"); li.textContent = category_name; li.appendChild(render(document.createElement("ul"), children)); ul.appendChild(li); } return ul; } const data = {"categories": [{"id": 62,"parent_id": 0,"category_name": "Category 1","category_slug": "category1",},{"id": 60,"parent_id": 0,"category_name": "Category 2","category_slug": "category2",},{"id": 61,"parent_id": 0,"category_name": "Category 3","category_slug": "category3",},{"id": 59,"parent_id": 0,"category_name": "Category 4","category_slug": "category4",},{"id": 1,"parent_id": 60,"category_name": "Button 1","category_slug": "button1",},{"id": 3,"parent_id": 61,"category_name": "Button 3","category_slug": "button3",},{"id": 2,"parent_id": 59,"category_name": "Button 2","category_slug": "button2",},{"id": 4,"parent_id": 61,"category_name": "Button 4","category_slug": "button4",},{"id": 5,"parent_id": 59,"category_name": "Button 5","category_slug": "button5",},{"id": 6,"parent_id": 61,"category_name": "Button 6","category_slug": "button6",},{"id": 7,"parent_id": 60,"category_name": "Button 7","category_slug": "button7",},{"id": 10,"parent_id": 62,"category_name": "Button 10","category_slug": "button10",},]}; const tree = transform(data.categories); render(document.querySelector("ul"), tree);

 <ul></ul>