以表格格式排列JSON字符串

Question

您好，有人可以让我知道如何使用Java脚本或jquery以表格格式排列以下JSON字符串。

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

我的输出应该如图所示

Answer 1

尝试此代码，它可以正常工作。

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>