使用jQuery使用json数据填充表

时间:2012-09-06 11:43:54

标签: php javascript jquery json

我试图用jQuery填充json数据表。但div内容依然存在。请帮我找一个错误。数组list包含数据(我使用console.log(list)进行了检查)。此外,list['Var1']list['Var2']引用了键Var1Var2指定的值。问题恰恰出在jQuery中。

function loadData() {
    $.getJSON(
              'modules/getData.php',
        function(data) {    
                  var list = data.flights;
                  var textToInsert = '';
                  console.log(list);
                  for (var i = 0; i < list.length; i += 1) {
                        textToInsert[i++]  = '<tr><td>';
                        textToInsert[i++] = list['Var1'];
                        textToInsert[i++] = '</td>' ;
                        textToInsert[i++]  = '<td>';
                        textToInsert[i++] = list['Var2'];                                                               
                        textToInsert[i++] = '</td> </tr>' ;              
                    }
                    $('#flights_table tbody').append(textToInsert.join(''));
              }
    );             
}   

<div id="flights_table" style="display:none;">
    <table id="newspaper-b" border="0" cellspacing="2" cellpadding="2" width = "100%">
                        <thead>
                            <tr>
                                <th scope="col">Var1</th>
                                <th scope="col">Var2</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
    </table>
</div>

访问getdata.php

$list = array();
//fill the list using 'keys' and 'values'
    echo json_encode(array('flights' => $list));
    die();

UDPATE:包含list.length。但Firebug仍然说

  

TypeError:textToInsert.join不是函数

解决方案:解决方案是使用它:

 for (var i = 0; i < list.length; i++) {
                       aux = list[i];
                        textToInsert  += '<tr><td>';
                        textToInsert  += aux.Var1;
}

2 个答案:

答案 0 :(得分:0)

在你的for循环中for (var i = 0; i <length; i += 1)

你不是说长度是多少!它应该是list.length

此外,如果要将textToInsert声明为数组而不是字符串,则应将其声明为

textToInsert = [];

答案 1 :(得分:0)

尝试

var textToInsert = new Array();