Nested JSON to Numbered HTML Table using Javascript

Question

I'm trying to generate HTML table from JSON

The JSON provided is deeply nested. With the help of this thread How do I loop through deeply nested properties of a JavaScript object?, I am able to get the values of the JSON but I am confused on how to generate the HTML table

var districts = {
    "district": [{
        "ration": 4,
        "states": [{
            "name": "Louisiana",
            "population": 42383,
            "cities": [{
                "name": "Cavalero"
            }]
        }]
    }, {
        "ration": 1,
        "states": [{
            "name": "Colorado",
            "population": 980,
            "cities": []
        }, {
            "name": "Arkansas",
            "population": 58998,
            "cities": []
        }, {
            "name": "Illinois",
            "population": 59333,
            "cities": [{
                "name": "Kenwood"
            }]
        }]
    }, {
        "ration": 2,
        "states": [{
            "name": "Washington",
            "population": 83984,
            "cities": [{
                "name": "Conestoga"
            }, {
                "name": "Whitehaven"
            }, {
                "name": "Dellview"
            }]
        }, {
            "name": "West Virginia",
            "population": 38034,
            "cities": []
        }]
    }]
};
var i, district, j, states, k, cities;
for (i = 0; i < districts.district.length; i++) {
    district = districts.district[i];
    print(i + 1, ". District", i + 1, "consists of following states", "--- ration", district.ration);
    for (j = 0; j < district.states.length; j++) {
        states = district.states[j];
        var said = (states.cities.length > 0) ? ("consists of following cities") : ("");
        print(i + 1, ".", j + 1, states.name, said, "--- population", states.population);
        for (k = 0; k < states.cities.length; k++) {
            cities = states.cities[k];
            print("     ", i + 1, ".", j + 1, ".", k + 1, cities.name);
        }
    }
}

Run this on Ideone

Any pointers/help/suggestions appreciated

That is not JSON, see benalman.com/news/2010/03/theres-no-such-thing-as-a-json — str
– str, Commented Feb 6, 2018 at 9:19

Lajos Arpad · Accepted Answer · 2018-02-06 11:56:47Z

You will need to generate a table, like this:

var districts = {
    "district": [{
        "ration": 4,
        "states": [{
            "name": "Louisiana",
            "population": 42383,
            "cities": [{
                "name": "Cavalero"
            }]
        }]
    }, {
        "ration": 1,
        "states": [{
            "name": "Colorado",
            "population": 980,
            "cities": []
        }, {
            "name": "Arkansas",
            "population": 58998,
            "cities": []
        }, {
            "name": "Illinois",
            "population": 59333,
            "cities": [{
                "name": "Kenwood"
            }]
        }]
    }, {
        "ration": 2,
        "states": [{
            "name": "Washington",
            "population": 83984,
            "cities": [{
                "name": "Conestoga"
            }, {
                "name": "Whitehaven"
            }, {
                "name": "Dellview"
            }]
        }, {
            "name": "West Virginia",
            "population": 38034,
            "cities": []
        }]
    }]
};
//Start of the table, including header
var table = '<table><thead><tr><th>Num</th><th>District</th><th>Population</th><th>Ration</th></tr></thead><tbody>';

//Num
for (var i = 0; i < districts.district.length; i++) {
    //District
    var district = districts.district[i];
    //First row
    table += '<tr><td>' + (i + 1) + '</td><td>District ' + district.ration + ' consists of the following states:</td><td></td><td>' + district.ration + '</td></tr>';
    //States
    var states = district.states;
    for (var j = 0; j < states.length; j++) {
        table += '<tr><td></td><td>' + (i + 1) + '.' + (j + 1) + ' ' + states[j] + ((states[j].cities && states[j].cities.length) ? ' consists of following cities:' : '') + '</td><td>' + states[j].population + '</td><td></td></tr>';
        //Cities
        if (states[j].cities) {
            for (var k = 0; k < states[j].cities; k++) {
                table += '<tr><td></td><td>' + (i + 1) + '.' + (j + 1) + '.' + (k + 1) + ' ' + states[j].cities[k].name + '</td><td></td><td></td></tr>';
            }
        }
    }
}

//End of the table
table += '</tbody></table>';

and then add table somewhere into your html.

Koushik Reddy U · Accepted Answer · 2018-02-06 10:08:04Z

if you want to generate the desired output as on that link, you can use <ol> <li></li> <li> <ol><li></li></ol> <li> </ol> instead of table. generate it using javascript. you can use below code to generate your ordered list which should be inserted on the main ordered list tag.

var district = districts.district;

function generateCities(cities){
    cities.map((city) => {
        return (
            "<li>"+ city.name  + "</li>"
        )
    })
}

function generateStates(states, generateCities){
    states.map((stat) => {
        return (
            "<li>"+stat.name + " consists of following cities --- population " + stat.population + "</li>"
            +"<ol>" + generateCities(stat.cities) + "</ol>"
            )
    });
}
function generateMyHtml(district, generateStates){
    district.map((dist, index) => {
        return (
            "<li> District "+ index + "consists of following states --- ration " + dist.ration + "</li>"
             +"<ol>" + generateStates(dist.states) + "</ol>"
        )   
    });
};

hope this is helpful

Collectives™ on Stack Overflow

Nested JSON to Numbered HTML Table using Javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related