user3657517 user3657517 - 6 months ago 21
HTML Question

Display json feed data into html

I want to display data from below url to html page:

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

(to display latest post from facebook).

Here it the code so far:

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


But I am not getting any results.

Can anyone please help if I am missing anything?

Thank you

Answer

Try this

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