JSON到Ajax中的HTML表格 [英] JSON to HTML Table in ajax

问题描述

这是我拥有的JSON

  {
version：5.2，
 user_type：online，
user：
 [
 {
name：John，
id：50 
 
 $ {
'name'：'Mark'，
id：57 
} 
] 
} 
  code> 

将上面的JSON转换为HTML的javascript

 < script type =text / javascript> 
 $（document）.ready（function（）{
 $ .ajax（{
 url：http：//PATH/user.json，
 dataType：'json '，
类型：'get'，
 cache：false，
成功：函数（数据）{
 /*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）; 
}，
错误：函数（d）{
 /*console.log(\"error\");*/ 
 alert（404。Please wait until the File is Loaded。）; 
} 
}）; 
}）; 
< / script> 
  

表格的HTML代码：



 < table class =table table-responsive table-hover table-borderedid =list_table_json> 
< thead> 
< tr> 
< th>名称< / th> 
< th> ID< / th> 
< / tr> 
< / thead> 
< / table> 
  

未在控制台中收到任何错误

<我得到的表格中的输出没有定义。如何将数据推送到json？

解决方案

您的循环应该像 $。each（data。用户，函数（index，value）{}）; 并关闭< / tr> 结束

 < script type =text / javascript> 
 $（document）.ready（function（）{
 $ .ajax（{
 url：http：//PATH/user.json，
 dataType：'json '，
类型：'get'，
 cache：false，
成功：函数（数据）{
 /*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）; 
}，
错误：函数（d）{
 /*console.log(\"error\");*/ 
 alert（404。请等待，直到文件被加载。）; 
} 
}）; 
}）; 
< / script> 
  

This is the JSON i have

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

The javascript to convert the above JSON to HTML

<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>

The HTML code for table :

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

Did not get any error's in the console

The output i get in the table says undefined. how to push the data to json ?

解决方案

Your loop should be like $.each(data.user, function(index, value){}); and close </tr> in end

<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>

这篇关于JSON到Ajax中的HTML表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！