Javascript ajax中的JSON到HTML表

这是我的JSON

{
   "version": "5.2",
   "user_type": "online",
   "user":
   [
       {
            "name": "John",
            "id": 50
       },
       {
            "name": "Mark",
            "id": 57
        }
    ]
}

用于将上述JSON转换为HTML的javascript

<script type="text/javascript">
$(document).ready(function(){
    $.ajax({
        url: "http://PATH/user.json",
        dataType: 'json',
        type: 'get',
        cache:false,
        success: function(data){
            /*console.log(data);*/
            var event_data = '';
            $.each(data, function(index, value){
                /*console.log(value);*/
                event_data += '<tr>';
                event_data += '<td>'+value.name+'</td>';
                event_data += '<td>'+value.id+'</td>';
                event_data += '<tr>';
            });
            $("#list_table_json").append(event_data);
        },
        error: function(d){
            /*console.log("error");*/
            alert("404. Please wait until the File is Loaded.");
        }
    });
});
</script>

$（文档）.ready（函数（）{
$.ajax({
url:“http://PATH/user.json",
数据类型：“json”，
键入：“get”，
cache:false，
成功：功能（数据）{
/*控制台日志（数据）*/
var事件_数据=“”；
$.each（数据、函数（索引、值）{
/*console.log（值）*/
事件_数据+=''；
事件数据+=''+值。名称+''；
事件数据+=''+值.id+''；
事件_数据+=''；
});
$（“#list_table_json”）.append（事件数据）；
},
错误：函数（d）{
/*控制台日志（“错误”）*/
警报（“404.请等待文件加载。”）；
}
});
});

表的HTML代码：

<table class="table table-responsive table-hover table-bordered" id="list_table_json">
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>                  
        </tr>                   
    </thead>
</table>

名称
身份证件

未在控制台中获取任何错误

---

我在表中得到的输出表示未定义。如何将数据推送到json？

您的循环应该类似于

$并在最后关闭

<script type="text/javascript">
$(document).ready(function(){
    $.ajax({
        url: "http://PATH/user.json",
        dataType: 'json',
        type: 'get',
        cache:false,
        success: function(data){
            /*console.log(data);*/
            var event_data = '';
            $.each(data.user, function(index, value){
                /*console.log(value);*/
                event_data += '<tr>';
                event_data += '<td>'+value.name+'</td>';
                event_data += '<td>'+value.id+'</td>';
                event_data += '</tr>';
            });
            $("#list_table_json").append(event_data);
        },
        error: function(d){
            /*console.log("error");*/
            alert("404. Please wait until the File is Loaded.");
        }
    });
});
</script>


$（文档）.ready（函数（）{
$.ajax({
url:“http://PATH/user.json",
数据类型：“json”，
键入：“get”，
cache:false，
成功：功能（数据）{
/*控制台日志（数据）*/
var事件_数据=“”；
$.each（data.user，函数（索引，值）{
/*console.log（值）*/
事件_数据+=''；
事件数据+=''+值。名称+''；
事件数据+=''+值.id+''；
事件_数据+=''；
});
$（“#list_table_json”）.append（事件数据）；
},
错误：函数（d）{
/*控制台日志（“错误”）*/
警报（“404.请等待文件加载。”）；
}
});
});
您必须更改这部分代码：

$.each(data.user, function(index, value){
    /*console.log(value);*/
    event_data += '<tr>';
    event_data += '<td>'+value.name+'</td>';
    event_data += '<td>'+value.id+'</td>';
    event_data += '</tr>';
});

$。每个（数据、用户、函数（索引、值）{
/*console.log（值）*/
事件_数据+=''；
事件数据+=''+值。名称+''；
事件数据+=''+值.id+''；
事件_数据+=''；
});
在这种情况下，我可以推荐Vue。查看下一个（工作）示例：


var表=新的Vue({
el:'动态'，
数据：{
用户：[]
}
})
//然后单击将加载的JSON分配给组件模型
//和视图（表）将自动重新渲染
$（“按钮”）。单击（=>
$.getJSON（'https://api.mockaroo.com/api/03f2c610?count=20&key=cdbbbcd0')
.done（数据=>table.$data.users=data）
)
#动态{
边界塌陷：塌陷；
}
#动态th，#动态td{
边框：1px纯黑；
}

从mockaroo.com加载一些虚假数据
身份证件
刻痕
名字
姓
电子邮件
{{column}}
$。each（data，
）不应该是
$。each（data.user，
？小心，在你的循环中，你没有在添加了提醒结束标记谢谢的两个感谢之后结束你的。工作很好，如果在JSON{“版本”：“5.2”，“用户类型”：“在线”，“用户”：[{“姓名”：“John”，“id”中会怎么样：50，“last name”：“A”}，{“name”：“Mark”，“id”：57“last name”：“B”}]}如何将“last name”添加到表中。它有一个空格$。each（data.user，function（index，value）{/*console.log（value）*/event\u data+=''；event\u data+=''+value.name+''+value.last\u name+''；event\u data+=''+value.id+''；event\u data+=''；}）；因为您的json有键“last name”，请尝试将键作为“last\u name”或“lastName”使用，是否有访问“last name”的方法在不更改JSON的情况下，您可以使用like值[“last name”]