how to display JSON data(Parent-Child-Grandchild) in three separate Divs using Jquery or Javascript

user_13241846 0
Viewed 146

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

how to display JSON data(Parent-Child-Grandchild) in three separate Divs using Jquery or Javascript. also click to change categories (onclick parent in middle div and show child in right 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>
jquery json javascript
1 Answers

You used ver key to define your data I correct it as this:

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

First I defined a function to get any of these rows by it's id as bellow.

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

    if(r == undefined)
        return false;

    return r;
}

Then I defined another function to add records based on their type (parent, child or 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>`);
}

Now you can add any of the records based on their type easily like this

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