在表格中填充json数据

时间:2019-12-02 18:40:24

标签: javascript php jquery html

javascript代码

$(function(){
    $(".user").on("click",function(e){
        e.preventDefault(); 
        var email = $(this).data("email");
        $.ajax({ 
            data:{email:email},                                                          
            type: "POST",                                                  
            url: 'getUser_detail.php',
            success: function(data) {        
                var data = JSON.parse(data);
                for (var i = 0; i < data['basic'].length; i++) {
                    $('#inputs').append('<label>Email:</label><input type="text" readonly class="form-control-plaintext" value="' + data['basic'][i].email + '" name="email[]" size="15">');
                    $('#inputs').append('<label>Password:</label><input type="text" readonly class="form-control-plaintext" value="'+ data['basic'][i].Pass +'" name="pass[]" size="5">');
                    $('#inputs').append('<label>Status:</label><input type="text" readonly class="form-control-plaintext" value="'+ data['basic'][i].status +'" name="pass[]" size="5">');
                    $('#inputs').append('<label>Acc. Address:</label><input type="text" readonly class="form-control-plaintext" value="'+ data['basic'][i].Accno +'" name="pass[]" size="44">');
                    $('#inputs').append('<label>Balance:</label><input type="text" readonly class="form-control-plaintext" value="'+ data['basic'][i].bal +'" name="pass[]" size="10">');
                }
                for( var j = 0; j<data['detail'].length; j++) {
                    var List = ["<tr><td>" + data['detail'][i].type + "</td><td>"+data['detail'][i].DB+"</td><td>"+data['detail'][i].LD+"</td><td>"+data['detail'][i].Prof+"</td><td>"+data['detail'][i].Server_stat+"</td></tr>"];
                }  
                $("#bodywallet").append(List);
            },
        });
    });
})

html代码

<table class="table" id="wallet">
                    <thead class=" text-primary">
        <tr>
            <th class="text-left">Type</th>
            <th class="text-left">Date_Bought</th>
            <th class="text-left">Expires</th>
            <th class="text-left">Profit</th>
            <th class="text-left">Status</th>
        </tr>
    </thead>
    <tbody class="text-left" id="bodywallet" >
</tbody> 
  </table>

这就是我的数据应该显示在表上的

enter image description here

但它仅显示第一条记录

我已经检查过json是否携带了所有必需的数据。我做错了什么是错。任何帮助将不胜感激。谢谢

php代码

while($row2 = mysqli_fetch_array($alEmailrslt))
{
 $json_array['detail'][] = $row2;
}

echo json_encode($json_array);

2 个答案:

答案 0 :(得分:0)

您正在将所有内容放入数组I,并将其每轮追加一次。 您应该改用以下方式:

success: function (data) {
    var data = JSON.parse(data);
    var list = []; // only one array
    for (var j = 0; j < data['detail'].length; j++) {
        // push to this array instead of overwriting the variable
        list.push("<tr><td>" + data['detail'][j].type + "</td><td>" + data['detail'][j].DB + "</td><td>" + data['detail'][j].LD + "</td><td>" + data['detail'][j].Prof + "</td><td>" + data['detail'][j].Server_stat + "</td></tr>");
    }
    // update html once
    // the join "glues" all parts of the array into one string
    $("#bodywallet").append(list.join());
}

答案 1 :(得分:0)

我认为您的列表不会每次都更新,最简单的方法是,请在下面的代码段中找到

php artisan tinker
   >>> App\relation::find(1)->address;
       => null
  >>>  App\relation::find(1)->RelationCreatewth;
        => null