JS操作JSON例

4216 ワード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="json.js"></script>
</head>
<body>
    <div style="text-align: left">
        <script type="text/javascript" language="JavaScript">
            var baseArray = new Array();
            baseArray[0] = { 'id': '1', cnt: [{ 'id': 1, 'name': 'n1', 'age': '20' }, { 'id': 4, 'name': 'n4', 'age': '24'}] };
            baseArray[1] = { 'id': '2', cnt: [{ 'id': 2, 'name': 'n2', 'age': '21' }, { 'id': 5, 'name': 'n5', 'age': '21'}] };
            baseArray[2] = { 'id': '3', cnt: [{ 'id': 3, 'name': 'n3', 'age': '23' }, { 'id': 6, 'name': 'n6', 'age': '22'}] };
            //baseArray[3] = "{ 'id': '4', 'cnt': [{ 'id': 7, 'name': 'n7', 'age': '21'}, { 'id': 8, 'name': 'n8', 'age': '25'}] }";//    Json  ,      
            baseArray[3] = '{ "id": "4", "cnt": [{ "id": 7, "name": "n7", "age": "21"}, { "id": 8, "name": "n8", "age": "25"}] }';


            //   Json  
            JSON.TryParse = function (tar) {
                if (typeof (tar) === 'string') {
                    return JSON.parse(tar);
                } else {
                    return tar;
                }
            };

            function showJson() {
                for (var i = 0; i < baseArray.length; i++) {

                    var group = JSON.TryParse(baseArray[i]); //   Json  

                    var groupID = group.id;
                    for (var j = 0; j < group.cnt.length; j++) {
                        var id = group.cnt[j].id;
                        var name = group.cnt[j].name;
                        var age = group.cnt[j].age + ' ';
                        //       
                        var appendstr = "<tr>";
                        appendstr += "<td>" + id + "</td>";
                        appendstr += "<td>" + name + "</td>";
                        appendstr += "<td>" + age + "</td>";
                        appendstr += "<td>" + groupID + "</td>";
                        appendstr += "</tr>";
                        $("#Table").append(appendstr);
                    }
                }
            }

        </script>
        <input type="button" value="json" onclick="showJson();">
        <br>
        <table id="Table" border="1" cellpadding="10" cellspacing="1" bordercolor="#FFAA00">
            <caption style="font-size: 15px">
                   <label id="tableRowCount"></label></caption>
            <th>
                id
            </th>
            <th>
                Name
            </th>
            <th>
                Age
            </th>
            <th>
                group
            </th>
        </table>
    </div>
</body>
</html>