arrange JSON string in table format

Question

Hi can any one let me know how to arrange the below JSON string in table format using java script or jquery.

[
    {
        "country_name": "africa",
        "sk_state_id": "13",
        "state_name": "up"
    },
    {
        "country_name": "London",
        "sk_state_id": "6,7,9,10,11",
        "state_name": "banglore,jammu,kerla,gujrat,mumbaaai"
    },
    {
        "country_name": "singapore",
        "sk_state_id": "18",
        "state_name": "jlsdbc"
    }
]

my out put should be as shown in the image

Possible duplicate of [Convert JSON array to an HTML table in jQuery](https://stackoverflow.com/questions/1051061/convert-json-array-to-an-html-table-in-jquery) — Ullas Hunka, Jul 11 '18 at 11:26
You are expected to at least try yourself, or, if you have tried, show us your code and the issues you're having — StudioTime, Jul 11 '18 at 11:27
Are they checkboxes on the right? And what's the name of the right-most column? — Alex, Jul 11 '18 at 11:55

score 0 · Answer 1 · answered Jul 11 '18 at 11:57

Try this code, It's working.

JQuery

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
    $(document).ready(function() {
        var data = [
            {
                "country_name": "africa",
                "sk_state_id": "13",
                "state_name": "up"
            },
            {
                "country_name": "London",
                "sk_state_id": "6,7,9,10,11",
                "state_name": "banglore,jammu,kerla,gujrat,mumbaaai"
            },
            {
                "country_name": "singapore",
                "sk_state_id": "18",
                "state_name": "jlsdbc"
            }
        ];

        var htmlData = "";
        $.each(data, function(i ,v) {
            htmlData += "<tr><td>"+v.country_name+"</td><td>";
            var state = v.state_name.split(',');
            var checkBox = "";
            $.each(state, function(i1 ,v1) {
                htmlData += v1+"<br />";        
                checkBox += "<input type='checkbox' checked /> <input type='checkbox' /><br />";
            });
            htmlData += "</td><td>"+checkBox+"</td>";               

        });
            $('table tbody').append(htmlData);
    });
</script>

HTML

<table border="1">
    <thead><tr><th>Country Name</th> <th>State Name</th> <th>Action</th></tr></thead>
    <tbody></tbody>
</table>

arrange JSON string in table format

1 Answers1