Create tree table from JSON object using jQuery

Question

I have following data structure coming as a JSON object from server side

var data = {
    "name": "preprodwizard",
    "cSVServers": [{
        "name": "preprodwizard_80_csvs",
        "status": "UP",
        "ipAddress": "162.115.34.53",
        "port": "80",
        "protocol": "HTTP",
        "lBVServers": [{
            "name": "preprodwizard_static_lbvs",
            "status": "UP",
            "ipAddress": "0.0.0.0",
            "port": "0",
            "protocol": "HTTP",
            "serviceGroups": [{
                "name": "preprodwizard_static_30443_sg",
                "status": "--",
                "ipAddress": "--",
                "port": "--",
                "protocol": "--",
                "servers": [{
                    "name": "--",
                    "status": "UP",
                    "ipAddress": "10.255.48.28",
                    "port": "30443",
                    "protocol": "--"
                }, {
                    "name": "--",
                    "status": "UP",
                    "ipAddress": "10.255.48.37",
                    "port": "30443",
                    "protocol": "--"
                }]
            }]
        }]
    }, {
        "name": "preprodwizard_443_csvs",
        "status": "UP",
        "ipAddress": "162.115.34.53",
        "port": "443",
        "protocol": "SSL",
        "lBVServers": [{
            "name": "preprodwizard_static_lbvs",
            "status": "UP",
            "ipAddress": "0.0.0.0",
            "port": "0",
            "protocol": "HTTP",
            "serviceGroups": [{
                "name": "preprodwizard_static_30443_sg",
                "status": "--",
                "ipAddress": "--",
                "port": "--",
                "protocol": "--",
                "servers": [{
                    "name": "--",
                    "status": "UP",
                    "ipAddress": "10.255.48.28",
                    "port": "30443",
                    "protocol": "--"
                }, {
                    "name": "--",
                    "status": "UP",
                    "ipAddress": "10.255.48.37",
                    "port": "30443",
                    "protocol": "--"
                }]
            }]
        }, {
            "name": "preprodwizard_web_lbvs",
            "status": "UP",
            "ipAddress": "0.0.0.0",
            "port": "0",
            "protocol": "HTTP",
            "serviceGroups": [{
                "name": "preprodwizard_web_28443_sg",
                "status": "--",
                "ipAddress": "--",
                "port": "--",
                "protocol": "--",
                "servers": [{
                    "name": "--",
                    "status": "UP",
                    "ipAddress": "10.255.48.28",
                    "port": "28443",
                    "protocol": "--"
                }, {
                    "name": "--",
                    "status": "UP",
                    "ipAddress": "10.255.48.37",
                    "port": "28443",
                    "protocol": "--"
                }]
            }]
        }]
    }]
};

Now I want to create a Tree table structure out of this JSON object. e.g.

There would be multiple csvServers, each csvServer will have some properties like name / status / ipAddress / Port / Protocol which will be in one row

Now each csvServer will have IBVServers, each IBVServer will have ServiceGroups and each ServiceGroups will have Servers.

How can I create this tree table http://wwwendt.de/tech/dynatree/doc/samples.html for above data structure.

culmat · Accepted Answer · 2013-09-03 20:04:28Z

4

The dynatree you mention does not seem to have tree table capabilities. I have can propose a solution using jsTreeTable.

    function normalize(data, hirarchy) {
        var hirarchy = hirarchy.slice(0)
        var nextLevel = hirarchy.shift()
        $.each(data, function(i, d) {
            d['children'] = d[nextLevel]
            if (hirarchy.length > 0) {
                normalize(d[nextLevel], hirarchy)
            }
        })
    }
    normalize(data.cSVServers, [ 'lBVServers', 'serviceGroups', 'servers' ])

    com_github_culmat_jsTreeTable.register(this)
    var options = {
        idAttr : 'name',
        slider : true,
        renderedAttr : {
            name : 'Name',
            status : 'Status',
            ipAddress : 'IP',
            port : 'Port',
            protocol : 'Protocol'
        },
        initialExpandLevel : 4
    }
    appendTreetable(data.cSVServers, options)

answered Sep 3, 2013 at 20:04

culmat

1,22612 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shantanoo K Over a year ago

This helped, appreciate your help

Collectives™ on Stack Overflow

Create tree table from JSON object using jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related