如何将json字符串写入table表格中

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。可以方便的将后台复杂的数据带回到前台进行展示，那么如何把json字符串写入到table表格之中呢？

json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构

1、对象：对象在js中表示为“{}”扩起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为 对象.key 获取属性值，这个属性值的类型可以是 数字、字符串、数组、对象几种。

2、数组：数组在js中是中括号“[]”扩起来的内容，数据结构为 ["java","javascript","vb",...]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是 数字、字符串、数组、对象几种。

经过对象、数组2种结构就可以组合成复杂的数据结构了。<引自百度百科>
下面以数组结构为例，简单介绍一下如何把数据写入表格。
假设我们从后台取回的数据是这样的：

var data=[[[[17.0,38.0,43.0,12.0,1.0,11.0,36.0,8.0,16.0,8.0,0.0,12.0,0.0,5.0,28.0,42.0,2.0,7.0,15.0,42.0,5.0,23.0,41.0,21.0],[12.0,34.0,38.0,5.0,16.0,36.0,20.0,27.0,36.0,44.0,6.0,24.0,22.0,6.0,44.0,28.0,23.0,19.0,23.0,5.0,45.0,8.0,12.0,3.0],[44.0,17.0,3.0,6.0,42.0,10.0,13.0,19.0,10.0,35.0,46.0,15.0,8.0,15.0,28.0,38.0,37.0,32.0,42.0,13.0,6.0,9.0,1.0,23.0],[1.0,34.0,18.0,6.0,20.0,37.0,2.0,29.0,38.0,33.0,45.0,12.0,30.0,5.0,49.0,29.0,10.0,12.0,41.0,31.0,11.0,17.0,30.0,9.0]],[[17.0,38.0,43.0,12.0,1.0,11.0,36.0,8.0,16.0,8.0,0.0,12.0,0.0,5.0,28.0,42.0,2.0,7.0,15.0,42.0,5.0,23.0,41.0,21.0],[12.0,34.0,38.0,5.0,16.0,36.0,20.0,27.0,36.0,44.0,6.0,24.0,22.0,6.0,44.0,28.0,23.0,19.0,23.0,5.0,45.0,8.0,12.0,3.0],[44.0,17.0,3.0,6.0,42.0,10.0,13.0,19.0,10.0,35.0,46.0,15.0,8.0,15.0,28.0,38.0,37.0,32.0,42.0,13.0,6.0,9.0,1.0,23.0],[1.0,34.0,18.0,6.0,20.0,37.0,2.0,29.0,38.0,33.0,45.0,12.0,30.0,5.0,49.0,29.0,10.0,12.0,41.0,31.0,11.0,17.0,30.0,9.0]],[[17.0,38.0,43.0,12.0,1.0,11.0,36.0,8.0,16.0,8.0,0.0,12.0,0.0,5.0,28.0,42.0,2.0,7.0,15.0,42.0,5.0,23.0,41.0,21.0],[12.0,34.0,38.0,5.0,16.0,36.0,20.0,27.0,36.0,44.0,6.0,24.0,22.0,6.0,44.0,28.0,23.0,19.0,23.0,5.0,45.0,8.0,12.0,3.0],[44.0,17.0,3.0,6.0,42.0,10.0,13.0,19.0,10.0,35.0,46.0,15.0,8.0,15.0,28.0,38.0,37.0,32.0,42.0,13.0,6.0,9.0,1.0,23.0],[1.0,34.0,18.0,6.0,20.0,37.0,2.0,29.0,38.0,33.0,45.0,12.0,30.0,5.0,49.0,29.0,10.0,12.0,41.0,31.0,11.0,17.0,30.0,9.0]],[[17.0,38.0,43.0,12.0,1.0,11.0,36.0,8.0,16.0,8.0,0.0,12.0,0.0,5.0,28.0,42.0,2.0,7.0,15.0,42.0,5.0,23.0,41.0,21.0],[12.0,34.0,38.0,5.0,16.0,36.0,20.0,27.0,36.0,44.0,6.0,24.0,22.0,6.0,44.0,28.0,23.0,19.0,23.0,5.0,45.0,8.0,12.0,3.0],[44.0,17.0,3.0,6.0,42.0,10.0,13.0,19.0,10.0,35.0,46.0,15.0,8.0,15.0,28.0,38.0,37.0,32.0,42.0,13.0,6.0,9.0,1.0,23.0],[1.0,34.0,18.0,6.0,20.0,37.0,2.0,29.0,38.0,33.0,45.0,12.0,30.0,5.0,49.0,29.0,10.0,12.0,41.0,31.0,11.0,17.0,30.0,9.0],[23.0,30.0,18.0,10.0,14.0,13.0,6.0,27.0,24.0,8.0,28.0,22.0,3.0,27.0,1.0,8.0,35.0,29.0,39.0,40.0,46.0,47.0,42.0,49.0],[28.0,39.0,1.0,15.0,16.0,4.0,15.0,13.0,28.0,8.0,19.0,0.0,13.0,39.0,40.0,40.0,10.0,10.0,1.0,37.0,15.0,7.0,41.0,6.0]]],[["负荷","A相","B相","C相"],["总功率因数","A相功率因数","B相功率因数","C相功率因数"],["零线电流","A相电流","B相电流","C相电流"],["A相电压","B相电压","C相电压","Uab线电压","Ubc线电压","Uca线电压"]]];

数据看上去很繁琐，我们可以看一下格式化后的样子：


这样就很清晰了，其中数组的第二项是表格中的列名数组，我们现在在html中定义一个表格：

<table class="allTable" cellspacing="0" cellpadding="0" border="0" align="Center" style="width: 1540px;">                                <tbody>                                <tr>                                    <th style="width:120px;">时间</th>                                    <th>1</th>                                    <th>2</th>                                    <th>3</th>                                    <th>4</th>                                    <th>5</th>                                    <th>6</th>                                    <th>7</th>                                    <th>8</th>                                    <th>9</th>                                    <th>10</th>                                    <th>11</th>                                    <th>12</th>                                    <th>13</th>                                    <th>14</th>                                    <th>15</th>                                    <th>16</th>                                    <th>17</th>                                    <th>18</th>                                    <th>19</th>                                    <th>20</th>                                    <th>21</th>                                    <th>22</th>                                    <th>23</th>                                    <th>24</th>                                </tr>                                <tr id="dmonitor_eprtmove_Pdata">                                </tr>                                <tr id="dmonitor_eprtmove_Padata">                                </tr>                                <tr id="dmonitor_eprtmove_Pbdata">                                </tr>                                <tr id="dmonitor_eprtmove_Pcdata">                                </tr>                                </tbody>                            </table>

下面我们就可以写一个函数把json数组写入表格了，需要用的jquery框架：

//写入表格数据    function dmonitor_eprtmove_writedata(seriesId,seriesName,data){        for(i=0;i<seriesId.length;i++){            $("#"+seriesId[i]).empty();            $("#"+seriesId[i]).append("<td style='width:120px;'>"+seriesName[i]+"</td>")            for(j=0;j<24;j++){                if(data==""){                    $("#"+seriesId[i]).append("<td >"+0+" </td>");                }else{                    $("#"+seriesId[i]).append("<td >"+data[i][j]+" </td>");                }            }        }    }

我们只需要把html中的tr id以及定义的data数组中的data[1],data[0]作为参数传入上面的函数就可以方便的把数据写入到表格中了。效果如下：

至于json对象，我们只需要将函数中的data[i]换成data.name以对象的形式取值即可。