简体   繁体   中英

Javascript - JSON: building a hierarchical tree

I'm trying to display a tree using dhtmlxtreegrid

I need help with creating the hierarchical tree data from flattened JSON.

My JSON data looks like this:

{
    "rows":  [
        {
            "id": "01", // child id
            "parentid": "00", // parent Id
            "data": [
                "101831",
                "Work",
                "Desc-4-1"
            ]
        },
        {
            "id": "02",
            "parentid": "01",
            "data": [
                "101832",
                "No Work",
                "Desc-4-0"
            ]
        },
        {
            "id": "03",
            "parentid": "01",
            "data": [
                "101835",
                "Work",
                "Desc-5-0"
            ]
        },
        {
            "id": "04",
            "parentid": "03",
            "data": [
                "101835",
                "Work",
                "Desc-5-1"
            ]
        }
    ]
}

The Result JSON should be in hierarchical tree structure:

{
    "rows": [
        {
            "id": "01",
            "parentid": "00",
            "data": [
                "101831",
                "Work",
                "Desc-4-1"
            ],
            "rows": [
                {
                    "id": "02",
                    "parentid": "01",
                    "data": [
                        "101832",
                        "No Work",
                        "Desc-4-0"
                    ]
                },
                {
                    "id": "0",
                    "parentid": "01",
                    "data": [
                        "101835",
                        "Work",
                        "Desc-5-0"
                    ]
                }
            ]
        }
    ]
}

if you need ac# solution here is a link which generate c# code for you.

http://json2csharp.com/

depending your result JSON data here is the c# code :

public class Row2
{
    public string id { get; set; }
    public string parentid { get; set; }
    public List<string> data { get; set; }
}

public class Row
{
    public string id { get; set; }
    public string parentid { get; set; }
    public List<string> data { get; set; }
    public List<Row2> rows { get; set; }
}

public class RootObject
{
    public List<Row> rows { get; set; }
}

I have tried multiple things I got this working if I understood your problem properly.

Your JSON data:-

var data = {
"rows":  [
    {
        "id": "01", // child id
        "parentid": "00", // parent Id
        "data": [
            "101831",
            "Work",
            "Desc-4-1"
        ]
    },
    {
        "id": "02",
        "parentid": "01",
        "data": [
            "101832",
            "No Work",
            "Desc-4-0"
        ]
    },
    {
        "id": "03",
        "parentid": "01",
        "data": [
            "101835",
            "Work",
            "Desc-5-0"
        ]
    }
]
}

Functions to change the structure.

var addRowsToLastChild = function(obj1,rowsToAppend){
//if that object has rows key check in that row otherwise add rows to the object
    if(obj1["rows"]){  
        addRowsToLastChild(obj1["rows"][0],rowsToAppend);
        return;
    }
    obj1["rows"] = [];
    obj1["rows"][0] = rowsToAppend;
    obj1;
}

var resultJSON = data.rows.reduce(function(obj1,obj2){
    addRowsToLastChild(obj1,obj2); 
    // object are passed by refference so any changes in obj1 will be affected
    return obj1;
},{});

The result will be:-

{
"rows": [
    {
        "id": "01",
        "parentid": "00",
        "data": [
            "101831",
            "Work",
            "Desc-4-1"
        ],
        "rows": [
            {
                "id": "02",
                "parentid": "01",
                "data": [
                    "101832",
                    "No Work",
                    "Desc-4-0"
                ],
                "rows": [{
                "id": "03",
                "parentid": "01",
                "data": [
                    "101835",
                    "Work",
                    "Desc-5-0"
                ]
            }
            ]
            }

        ]
    }
]
};

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM