JSON 表不会显示答案

【问题标题】：JSON table won't show upJSON 表不会显示
【发布时间】：2017-07-27 03:33:10
【问题描述】：

我想从 JSON 中提取一些数据并将其放入表中。 Firefox 和 Chrome 仅显示空白页。 Webconsole 没有出现任何错误。我的代码有什么问题？

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>    
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
        $.getJSON('./url.php', function(data) {
            var cars = data.rec.vehicles.vehicles;
            $.each(cars, function(key, data){
                console.log(data.carName);
                $('#usertable').append(
                    function() {
                        return "<tr>"+
                                    "<td>"+data.carName+"</td>"+
                                    "<td>"+data.model+"</td>"+
                                    "<td>"+data.fuelState+"</td>"+
                                    "<td>1</td>"+
                                "<tr>"; 
                    }
                );
            })
        });
    });
</script>
</body>
</html>

【问题讨论】：

您的 HTML 中没有 ID 为 usertable 的元素。 console.log(data.carName); 调用有效吗？
我需要具体改变什么？调用是有效的，是的。
更好地复制粘贴在这里也是一个很好的答案 - 显然他从某个地方复制了它，但从未真正研究过它的作用
我已经编辑了我的答案。

标签： json html-table

【解决方案1】：

您的 HTML 中没有 ID 为 usertable 的元素。 jQuery 没有地方可以追加 tr 元素。

HTML：

<table id="usertable">
</table>

JavaScript：

var cars = [{
    carName: "Car 1",
    model: "model 1",
    fuelState: "full"
}, {
    carName: "Car 2",
    model: "model 2",
    fuelState: "full"
}, {
    carName: "Car 3",
    model: "model 1",
    fuelState: "half"
}, {
    carName: "Car 4",
    model: "model 2",
    fuelState: "half"
}, {
    carName: "Car 5",
    model: "model 1",
    fuelState: "empty"
}];

$.each(cars, function (key, data) {
    console.log(data.carName);
    $('#usertable').append(

    function () {
        return "<tr>" +
            "<td>" + data.carName + "</td>" +
            "<td>" + data.model + "</td>" +
            "<td>" + data.fuelState + "</td>" +
            "<td>1</td>" +
            "<tr>";
    });
})

见http://jsfiddle.net/lutzhorn/v6A3A/4/

【讨论】：