Question

我正在尝试将json数据从php文件传递到html表中。我得到了它的工作，但我的所有数据都被传递到一行。如何将每个值放入一个新行？

JSON：

{"users":[{"key":["3108","3098","3039","3033","2508"]}]}

jquery代码：

$(document).ready(function(){
var url="localhost/testfile.php";
var table='<table>';
$.getJSON(url,function(data){
    $.each( data.users, function( index, item){
            table+="<thead><tr><th>Key</th></tr></thead><tbody><tr><td>"+item.key+"</td></tr></tbody>";
            table+='</table>';
            $("#jsondata").html( table );

更新：如果在用户中我有多个条目，则格式正确：

$.each(data.users, function(index, item) { 
 table += "<tr><td>" + item.key + "</td>"+"<td>" + item.x + "</td></tr>"

或者我的格式错误了？

非常感谢任何指导！

Answer 1

您在循环外创建表标记（正确）。您还应创建thead和标题行，然后仅在循环中创建tr行。第二个问题是，您要在循环的每次迭代中设置#jsondata div的HTML 。你应该在循环之后设置：

$.getJSON(url,function(data){ var table = '<table><thead><tr><th>Key</th></tr></thead><tbody>'; $.each( data.users, function( index, item){ table += "<tr><td>"+item.key+"</td></tr>"; }); // after the loop, close your tbody and table tags table += '</tbody></table>'; // then AFTER the loop, you set the data to the table. $("#jsondata").html( table ); });

修改：您没有获得正确的数据，请查看您的JSON结构：

{ "users": [ { "key": [ "3108", "3098", "3039", "3033", "2508" ] } ] }

所以你可以从＆＃34;漂亮＆＃34; JSON上面你实际上有两个级别的数组，所以你的循环需要适应它。如果您只希望users有一个条目key，那么只需将$.each()更改为：

$.each(data.users.key, function(index, item) { table += "<tr><td>" + item + "</td></tr>"; });

Answer 2

我认为这会奏效：

<script type="text/javascript">         
$(document).ready(function(){
           var url="localhost/testfile.php";
           var tableHeaders='<tr><th>Key</th></tr>';
           var tableBody = '';
    $.getJSON(url,function(data){
        $.each(data.users, function( index, item){
                tableBody+="<tr><td>"+item.key+"</td></tr>";
        });
    });
    //Adding headers to the table
    $("table thead").html(tableHeaders);
    //Adding rows to the table
    $("table tbody").html(tableBody);
});
</script>

<table>
  <thead></thead>
  <tbody></tbody>
</table>

将json传递给html表：数据全部在一行中

2 个答案: