将 json 提要数据显示为 html答案

【问题标题】：Display json feed data into html将 json 提要数据显示为 html
【发布时间】：2016-05-11 07:51:56
【问题描述】：

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

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

（显示来自 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>

但我没有得到任何结果。

如果我遗漏了什么，谁能帮忙？

谢谢

【问题讨论】：

myFunction 被叫到了吗？你从 facebook 得到 200 的回报吗？
是的，document.getElementById("id01").innerHTML = out;将获得输出，如果我更改链接“w3schools.com/website/customers_mysql.php”而不是获得输出，但不是使用 facebook 图 url，请检查 w3schools.com/json/tryit.asp?filename=tryjson_server_sql
我关注了这个例子 w3schools.com/json/tryit.asp?filename=tryjson_server_sql 因为我对 json 不是很熟悉
我还应该指出您的代码中存在 XSS 漏洞。 Facebook 不保证它会转义它返回的数据并且你正在清理你的输出。有关如何缓解此安全问题的更多信息，我建议您通过本文深入了解 DOM 构建：developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/…
检查您是否从 facebook 获得 200 回馈。您可能会收到 401 或其他信息，因此不会调用 myFunction

标签： javascript html json facebook facebook-graph-api

【解决方案1】：

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);
}

【讨论】：

我投票赞成稍微解释一下答案，而不是仅仅修复代码
感谢您的解释。我希望我可以将多个问题标记为答案。

【解决方案2】：

试试这个

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

【讨论】：

对于任何想要操作系统查看完整代码的人，我已经用最终的工作代码更新了我的问题。谢谢
我认为更新 question 以使其正常工作不是一个好主意。未来的读者将不会再认识到这个问题。
如果您能提供帮助，我还有 1 个小问题，我想将 facebook 的 created_time 显示到一个小日期，例如。 2016-04-06T02:01:21+0000 到“2016-04-06 02:01:21”或“2 小时前”。有什么办法吗？
@JoachimSchirrmacher 将我的问题更新为以前的问题。再次感谢。