将json提要数据显示为html

Display json feed data into html

本文关键字：显示 html 数据 json      更新时间：2023-09-26

我想显示从以下url到html页面的数据：

https://graph.facebook.com/1041049395967347/posts?access_token=616050815226195|bqcTMDgKwdzdDyOeDuyIKEYZlo

（显示来自facebook的最新帖子）。

这是迄今为止的代码：

<!DOCTYPE html>
<html>
<body>
<h1>Customers</h1>
<div id="id01"></div>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "https://graph.facebook.com/1041049395967347/posts?access_token=616050815226195|bqcTMDgKwdzdDyOeD8uyIKEYZlo";

xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(response) {
    var arr = JSON.parse(response);
    var i;
    var out = "<table>";
    for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" + 
        arr[i].story +
        "</td><td>" +
        arr[i].story +
        "</td><td>" +
        arr[i].created_time +
        "</td></tr>";
    }
    out += "</table>";
    document.getElementById("id01").innerHTML = out;
}
</script>
</body>
</html>

但我没有得到任何结果。

如果我遗漏了什么，有人能帮忙吗？

感谢

arr不是一个数组，而是一个对象，包含元素data和paging，因此迭代元素是不起作用的。相反，您应该使用arr.length:

var xmlhttp = new XMLHttpRequest();
var url = "https://graph.facebook.com/1041049395967347/postsaccess_token=616050815226195|bqcTMDgKwdzdDyOeD8uyIKEYZlo";
xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(response) {
  var arr = JSON.parse(response);
  var i;
  var out = "<table>";
  for (i = 0; i < arr.data.length; i++) {
        out += "<tr><td>" + 
        arr.data[i].story +
        "</td><td>" +
        arr.data[i].story +
        "</td><td>" +
        arr.data[i].created_time +
        "</td></tr>";
  }
  out += "</table>";
  $("#divContent").html(out);
}

试试这个

$.getJSON("https://graph.facebook.com/1041049395967347/posts?access_token=616050815226195|bqcTMDgKwdzdDyOeD8uyIKEYZlo",null,function(result){
    
  var out = "<table>";
    for(i = 0; i < result.data.length; i++) {
        out += "<tr><td>" + 
        result.data[i].story +
        "</td><td>" +
        result.data[i].story +
        "</td><td>" +
        result.data[i].created_time +
        "</td></tr>";
    }
    out += "</table>";
  
  $("#divContent").html(out);
  
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divContent"></div>

相关文章：