Как отобразить данные JSON (Parent-Child-Grandchild) в трех отдельных Div, используя Jquery или Javascript

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

как отобразить данные JSON (родитель-ребенок-внук) в трех отдельных делениях, используя Jquery или Javascript. также нажмите, чтобы изменить категории (родительский щелчок в среднем div и показывать child в правом 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"},
];

Сначала я определил функцию, чтобы получить любую из этих строк по ее идентификатору, как показано ниже.

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