Javascript 将Json导入html（表）_Javascript_Php_Jquery_Json_Ajax

Javascript 将Json导入html（表）

javascript php jquery json ajax

Javascript 将Json导入html（表）,javascript,php,jquery,json,ajax,Javascript,Php,Jquery,Json,Ajax,我正在尝试将json url导入表中的html。问题是当我得到数据时，我得到了25行，我在web控制台上得到了：Object{data:Array[25]，paging:Object}我还有下面的代码，我猜它只为一行设计。我知道我在每个对象上都有循环，用每个迭代的相关数据附加一个表行。问题是我不知道怎么做，我不是专家。谢谢你的帮助这是我在json url上获得的数据： { "data": [ { "created_time": "2017-11-10T01

我正在尝试将json url导入表中的html。问题是当我得到数据时，我得到了25行，我在web控制台上得到了：Object{data:Array[25]，paging:Object}我还有下面的代码，我猜它只为一行设计。我知道我在每个对象上都有循环，用每个迭代的相关数据附加一个表行。问题是我不知道怎么做，我不是专家。谢谢你的帮助

这是我在json url上获得的数据：

 {
   "data": [
      {
         "created_time": "2017-11-10T01:24:47+0000",
         "permalink_url": "https://www.facebook.com/DBZSFANSOFICIAL2/posts/1539014319521507",
         "id": "949007375188874_1539014319521507"
      },
      {
         "created_time": "2017-11-10T01:23:37+0000",
         "permalink_url": "https://www.facebook.com/DBZSFANSOFICIAL2/posts/1539013649521574",
         "id": "949007375188874_1539013649521574"
      },
      {
         "created_time": "2017-11-09T23:59:15+0000",
         "permalink_url": "https://www.facebook.com/DBZSFANSOFICIAL2/posts/1538951229527816",
         "id": "949007375188874_1538951229527816",
         "shares": {
            "count": 20
         }
      },
      {
         "created_time": "2017-11-09T23:32:30+0000",
         "permalink_url": "https://www.facebook.com/DBZSFANSOFICIAL2/posts/1538935439529395",
         "id": "949007375188874_1538935439529395"
      },

这是我的密码

<body>
    <input type="text" class="txtPagina">
    <button class="btnBuscar">Buscar</button>
    <table class="tabla" border='1'>
         <tr>

             <td>created time</td>
             <td>permalink url</td>
             <td>id</td>
             <td>Shares Count</td>


         </tr>
    </table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('.btnBuscar').on('click', function (){
            var pagina = $('.txtPagina').val();

            //Ajax
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "https://graph.facebook.com/"+pagina+"/feed?fields=created_time,permalink_url,id,shares& access_token=mytoken",
                success: function(data){
                    console.log(data);
                   $('.tabla').append("<tr><td>"+data.created_time+"</td><td>"+data.permalink_url+"</td><td>"+data.id+"</td><td>"+data.shares+"</td></tr>");
                },
                error: function (){
                    console.log("Error");
                }
            });
        });
    });
</script> 
</body>
</html>


客车
创造时间
永久链接
身份证件
股数
$（文档）.ready（函数（）{
$（'btnBuscar'）。在（'click'，函数（）{
var pagina=$（'.txtPagina'）.val（）；
//阿贾克斯
$.ajax({
键入：“获取”，
数据类型：“json”，
url:“https://graph.facebook.com/“+pagina+”/feed？字段=创建时间、永久链接url、id、共享和访问\u令牌=mytoken”，
成功：功能（数据）{
控制台日志（数据）；
$（'.tabla'）.append（“+data.created\u time+”“+data.permalink\u url+”“+data.id+”“+data.shares+”）；
},
错误：函数（）{
控制台日志（“错误”）；
}
});
});
});

成功：功能（数据）{
控制台日志（数据）；
$（'.tabla'）.append（“+data.created\u time+”“+data.permalink\u url+”“+data.id+”“+data.shares+”）；
},

应该是

success: function(data){
  $.each(data.data, function(i, d){
    var s = d.shares ? '<td>'+d.shares.count+'</td>' : '';
    $('.tabla').append('<tr><td>'+d.created_time+'</td><td>'+d.permalink_url+'</td><td>'+d.id+'</td>'+s+'</tr>');
  });
},

成功：函数（数据）{
$.each（数据、数据、函数（i、d）{
var s=d.shares？''+d.shares.count+''：；
$（'.tabla'）.append（''+d.created_time+''+d.permalink_url+''+d.id+''+s+''）；
});
},

函数创建（t、attr、父节点、innerdata）{
var dom=document.createElement（t）
for（输入属性）{
setAttribute（key，attr[key]）
}
dom.innerHTML=innerdata；
父节点\子节点（dom）
返回dom；
}
window.onload=函数（）{
变量d={
“数据”：[
{
“创建时间”：“2017-11-10T01:24:47+0000”，
“永久链接url”：https://www.facebook.com/DBZSFANSOFICIAL2/posts/1539014319521507",
“id”：“949007375188874_1539014319521507”
},
{
“创建时间”：“2017-11-10T01:23:37+0000”，
“永久链接url”：https://www.facebook.com/DBZSFANSOFICIAL2/posts/1539013649521574",
“id”：“949007375188874_1539013649521574”
},
{
“创建时间”：“2017-11-09T23:59:15+0000”，
“永久链接url”：https://www.facebook.com/DBZSFANSOFICIAL2/posts/1538951229527816",
“id”：“949007375188874_1538951229527816”，
“股份”：{
“计数”：20
}
},
{
“创建时间”：“2017-11-09T23:32:30+0000”，
“永久链接url”：https://www.facebook.com/DBZSFANSOFICIAL2/posts/1538935439529395",
“id”：“949007375188874_153893543959395”
},
]
}
var tb=document.getElementById（'可输入'）
f={“创建时间”：1，“永久链接url”：1，“id”：1，“共享”：1}
d['data'].forEach（函数（val）{
tr_dom=create（'tr'，{}，tb'，）
Object.keys（f）.forEach（函数（tr）{
如果（tr在val中）{
如果（'shares'==tr）
td_dom=create（'td'，{}，tr_dom，val[tr]['count']））
其他的
td_dom=create（'td'，{}，tr_dom，val[tr]）
}否则
td_dom=create（'td'，{}，tr_dom'，）
})
})
};

创造时间
永久链接
身份证件
分享
等一下，差不多了。该表显示了数据，但最后一个Shares count显示了[object object]，我应该看到一个数字。修复了该问题。谢谢，现在该表只显示一行（带值），web控制台显示此错误：TypeError:d.Shares未定义现在测试是否存在d.Shares。真棒兄弟，非常感谢！。
success: function(data){
  $.each(data.data, function(i, d){
    var s = d.shares ? '<td>'+d.shares.count+'</td>' : '';
    $('.tabla').append('<tr><td>'+d.created_time+'</td><td>'+d.permalink_url+'</td><td>'+d.id+'</td>'+s+'</tr>');
  });
},