解析json數據將數據填入表格對應的單元格

原創

2020-02-21 19:06

{
  "code":0,
    "data":{
      "colum":[
        "李慧慧",
        "安傑",
        "趙琦"
      ],
      "data":{
        "2016-02-15":{
          "李慧慧":{
            "SUM(sales)":"145000"
          }
        },
        "2016-07-05":{
          "李慧慧":{
            "SUM(sales)":"100000"
          }
        },
        "2016-06-01":{
          "李慧慧":{
            "SUM(sales)":"600000"
          }
        },
        "2015-12-15":{
          "李慧慧":{
            "SUM(sales)":"136200"
          }
        },
        "2016-02-10":{
          "李慧慧":{
            "SUM(sales)":"85000"
          }
        },
        "2016-05-21":{
          "李慧慧":{
            "SUM(sales)":"2000"
          },
          "安傑":{
            "SUM(sales)":"145000"
          }
        },
        "2016-03-19":{
          "李慧慧":{
            "SUM(sales)":"45000"
          }
        },
        "2016-07-26":{
          "安傑":{
            "SUM(sales)":"3000"
          }
        },
        "2016-08-07":{
          "安傑":{
            "SUM(sales)":"14000"
          }
        },
        "2016-06-12":{
          "安傑":{
            "SUM(sales)":"5000"
          }
        },
        "2016-04-15":{
          "李慧慧":{
            "SUM(sales)":"6000"
          }
        },
        "2016-09-12":{
          "趙琦":{
            "SUM(sales)":"1000"
          }
        }
      },
      "row":[
        "2015-12-15",
        "2016-02-15",
        "2016-06-01",
        "2016-07-05",
        "2016-09-12",
        "2016-02-10",
        "2016-04-15",
        "2016-05-21",
        "2016-06-12",
        "2016-03-19",
        "2016-08-07",
        "2016-07-26"

      ]
    }

}

展示格式如下：

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <script src="jquery-1.11.3.js"></script>

</head>
<body>
<table class="table table-bordered"></table>
<script>

$(function () {

    $.ajax({
            type:"get",
            url:"test.json",
            dataType:'json',
            success:function (data) {
                queryTable(data);
            }
        });

        function queryTable(data){

        var thead = "<thead><tr  class='danger'><th>";
        var tbody = "<tbody>";
        var th = "";
        $.each(data.data.colum,function (key,value) {
            th = "<th>"+value+"</th>";
            thead += th;
        });
        var tr = "";
        var rowArr = data.data.row;
        var colArr = data.data.colum;
        for(var i=0;i<rowArr.length;i++){
            tr += "<tr><td>"+rowArr[i]+"</td>";
            for(var j=0;j<colArr.length;j++){
                var sumObj = data.data.data[rowArr[i]][colArr[j]];
                if(sumObj){
                    for(var k in sumObj){
                        tr += "<td>"+sumObj[k]+"</td>";
                    }
                }else{
                    tr += "<td></td>";
                }
            }
            tr += "</tr>";
        }
        tbody += tr;
        thead += "</tr></thead>";

       $('.table').append(thead+tbody);

    };
});


</script>
</body>
</html>