javascript - 如何使用 Jquery 或 Javascript 在三个单独的 Div 中显示 JSON 数据(父子-孙子)

Question

ver data = [
    {"id": 1,"parent": 0,"name": "Parent"},
    {"id": 2,"parent": 1,"name": "Child"},
    {"id": 3,"parent": 1,"name": "Child"},
    {"id": 4,"parent": 2,"name": "GrandChild"},
    {"id": 5,"parent": 2,"name": "GrandChild"},
    {"id": 6,"parent": 3,"name": "GrandChild"},
    {"id": 7,"parent": 3,"name": "GrandChild"},
    {"id": 8,"parent": 5,"name": "Great-GrandChild"},
    {"id": 9,"parent": 5,"name": "Great-GrandChild"},
    {"id": 10,"parent": 6,"name": "Great-GrandChild"},
    {"id": 11,"parent": 6,"name": "Great-GrandChild"},
    {"id": 12,"parent": 7,"name": "Great-GrandChild"},
    {"id": 13,"parent": 7,"name": "Great-GrandChild"}
]

如何使用 Jquery 或 Javascript 在三个单独的 Div 中显示 JSON 数据(父子-孙子)。还可以单击更改类别(单击中间 div 中的父级并在右侧 div 中显示子级)

<div class="w-100 d-flex">
            <div class="eq_width align-self-center left_side">
                <span class="label">Parent</span>
            </div>

            <div class="vl"></div>
            <div class="eq_width align-self-center middle_side">
                <span class="label">Child</span>
                <span class="label">Child</span>
            </div>

            <div class="vl"></div>
            <div class="eq_width align-self-center right_side">
                <span class="label">GrandChild</span>
                <span class="label">GrandChild</span>
                <span class="label">GrandChild</span>
                <span class="label">GrandChild</span>
            </div>
        </div>

Answer 1

您使用 ver 键来定义您的数据，我将其更正如下:

var data = [
    {"id": 1,"parent": 0,"name": "Parent"},
    {"id": 2,"parent": 1,"name": "Child"},
    {"id": 3,"parent": 1,"name": "Child"},
    {"id": 4,"parent": 2,"name": "GrandChild"},
    {"id": 5,"parent": 2,"name": "GrandChild"},
    {"id": 6,"parent": 3,"name": "GrandChild"},
    {"id": 7,"parent": 3,"name": "GrandChild"},
];

首先，我定义了一个函数来通过其 id 获取任何这些行，如下所示。

let getById = (_id, _data) =>
{
    let r = _data.find(x => x.id === _id);

    if(r == undefined)
        return false;

    return r;
}

然后我定义了另一个函数来根据类型(parent、child 或 grandchile)添加记录

let add = (row,_data) =>
{
    let _class;
    let type;

    if(row.parent == "0")
        _class = "left_side";
    else
    {
        let parent = getById(row.parent, _data);

        if(parent === false)
            return false;

        if(parent.parent == "0")
            _class = "middle_side";
        else
        {
            _class = "right_side";

            if(getById(parent.parent, _data) === false)
                return false;
        }
    }

    $("." + _class).append(`<span class="label">${row.name}</span>`);
}

现在您可以像这样根据记录的类型轻松添加任何记录

$.each(data,(index,value)=>{
    if(add(value,data) === false)
    {
        // wrong data. show some error!
        return;
    }
});