2017-01-15 54 views
2

我得到一個Facebook圖形api響應,然後試圖將它附加到我的html頁面上的div。有問題.append()

返回的數據來自在

{ 
    "posts": { 
    "data": [ 
     { 
     "message": "hello and welcome to my fb page", 
     "permalink_url": "https://www.facebook.com/{Page-id}/posts/1", 
     "created_time": "2017-01-02T03:01:39+0000", 
     "id": "784985445000793_689793694519968" 
     } 
    ], 
    "paging": { 
     "previous": "https://graph.facebook.com/v2.8/684985445000793/posts?fields=message,permalink_url,created_time&since=1483326099&access_token=EAACEdEose0cBAODD91oYj3HlLZCffFtMaZBkT3jCsGV6a1vwXgoy77zVcemkH1ibR0Q6ZB62ARZCQjezuZCGkwPbWy17AUpQ7IA7MqgFRuBhQuM1k3Qj497stZCYTwHHmszLQf9Oc3dIrAZBsNKvjHm1pcmetF3r4dOFNEJfY4pyOrqahcYxnaq&limit=25&__paging_token=enc_AdBtPTrNppu8xpLcnSYGmdAnZBZCxHeNQVZCZAXf6ptMRsuGo8rUjJOB7OvhM3o7pa8ERb0WHr5xkEOm4P3ysEBlKeyRA8k8qHsOaF4Eguw0WcLhSAZDZD&__previous=1", 
     "next": "https://graph.facebook.com/v2.8/684985445000793/posts?fields=message,permalink_url,created_time&access_token=EAACEdEose0cBAODD91oYj3HlLZCffFtMaZBkT3jCsGV6a1vwXgoy77zVcemkH1ibR0Q6ZB62ARZCQjezuZCGkwPbWy17AUpQ7IA7MqgFRuBhQuM1k3Qj497stZCYTwHHmszLQf9Oc3dIrAZBsNKvjHm1pcmetF3r4dOFNEJfY4pyOrqahcYxnaq&limit=25&until=1483326099&__paging_token=enc_AdBtPTrNppu8xpLcnSYGmdAnZBZCxHeNQVZCZAXf6ptMRsuGo8rUjJOB7OvhM3o7pa8ERb0WHr5xkEOm4P3ysEBlKeyRA8k8qHsOaF4Eguw0WcLhSAZDZD" 
    } 
    }, 
    "id": "684985445000793" 
} 

格式,以便基本上沒有從我的知識對象是data.posts [I] .objectname

即。對於帖子1的消息將是data.posts [1] .message

我的代碼如下,我相信我在我的for循環做錯了什麼,但我不知道如何解決它,我基本上需要遍歷data.posts,而不僅僅是數據將只包含帖子,所以不需要遍歷數據,只需要在數據中的帖子。

我當前的代碼如下:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$.ajax({ 
       type: 'POST', 
       url: 'proxy.php', 
       data: {graphUrl: 'https://graph.facebook.com/{My-Page-ID}?fields=posts{message,permalink_url,created_time}'}, 
       timeout: timeout, 
       error: load_error, 
       success: function (postinf) { 
        for (var i = 0; i < postinf.length; i++){ 
         function(posts) { 
          for (var ii = 0; ii < posts.length; ii++){ 
           var post = postinf.posts[ii].message; 
           var postlnk = postinf.posts[ii].permalink_url; 
           var time = postinf.posts[ii].created_time; 
           $('#fb-feed').html('<a href="' + postlnk + '">' + post + '<br /> <br />@' + time + '<br /> <br />'); 
          } 
         } 
        } 
        }; 
        console.log(out); 
       } 
      }); 

     }); 
    }); 
</script> 

我沒有收到關於proxy.php任何錯誤,所以我相信,正是這種.HTML頁面,而不是在PHP腳本中。

但只是櫃面,這裏是PHP提前給誰就給誰能夠幫我解決這個問題

<?php 
// always add this header to ensure the JSON is output in the correct format 
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); 
header("Cache-Control: no-cache"); 
header("Pragma: no-cache"); 
header('Content-Type: application/json; charset=utf-8'); 

$graphUrl = $_POST['graphUrl']; 
if ($graphUrl == "") { 
    $graphUrl = "https://graph.facebook.com/facebook/feed?fields=posts{message,permalink_url,created_time}"; 
} 

//App Info, needed for Auth 
$app_id = "MY-APP-ID"; 
$app_secret = "MY-APP-SECRET"; 

//retrieve auth token 
$authToken = fetchUrl("https://graph.facebook.com/oauth/access_token?type=client_cred&client_id={$app_id}&client_secret={$app_secret}"); 

//Echo back json to read client side. 
echo fetchUrl("{$graphUrl}&access_token={$authToken}"); 

function fetchUrl($url){ 
    $ch = curl_init(); 
    curl_setopt($ch, CURLOPT_URL, $url); 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
    curl_setopt($ch, CURLOPT_TIMEOUT, 20); 
    $retData = curl_exec($ch); 
    curl_close($ch); 
    return $retData; 
} 
?> 

感謝。

+0

這不是您遇到的直接問題,但通過使用Facebook Graph API的JavaScript和PHP SDK,您可能會有更好的運氣。如果您的應用程序完全是客戶端,那麼JS SDK就是您所需要的。 – Brad

回答

0

您需要遍歷拋postinf.posts.data.length這樣的:

for (var i = 0; i < postinf.posts.data.length; i++){ 
    var post = postinf.posts.data[i].message; 
    var postlnk = postinf.posts.data[i].permalink_url; 
    var time = postinf.posts.data[i].created_time; 
} 

下面是一個運行實例:

var postinf = { 
 
    "posts": { 
 
    "data": [ 
 
     { 
 
     "message": "hello and welcome to my fb page", 
 
     "permalink_url": "https://www.facebook.com/{Page-id}/posts/1", 
 
     "created_time": "2017-01-02T03:01:39+0000", 
 
     "id": "784985445000793_689793694519968" 
 
     } 
 
    ], 
 
    "paging": { 
 
     "previous": "https://graph.facebook.com/v2.8/684985445000793/posts?fields=message,permalink_url,created_time&since=1483326099&access_token=EAACEdEose0cBAODD91oYj3HlLZCffFtMaZBkT3jCsGV6a1vwXgoy77zVcemkH1ibR0Q6ZB62ARZCQjezuZCGkwPbWy17AUpQ7IA7MqgFRuBhQuM1k3Qj497stZCYTwHHmszLQf9Oc3dIrAZBsNKvjHm1pcmetF3r4dOFNEJfY4pyOrqahcYxnaq&limit=25&__paging_token=enc_AdBtPTrNppu8xpLcnSYGmdAnZBZCxHeNQVZCZAXf6ptMRsuGo8rUjJOB7OvhM3o7pa8ERb0WHr5xkEOm4P3ysEBlKeyRA8k8qHsOaF4Eguw0WcLhSAZDZD&__previous=1", 
 
     "next": "https://graph.facebook.com/v2.8/684985445000793/posts?fields=message,permalink_url,created_time&access_token=EAACEdEose0cBAODD91oYj3HlLZCffFtMaZBkT3jCsGV6a1vwXgoy77zVcemkH1ibR0Q6ZB62ARZCQjezuZCGkwPbWy17AUpQ7IA7MqgFRuBhQuM1k3Qj497stZCYTwHHmszLQf9Oc3dIrAZBsNKvjHm1pcmetF3r4dOFNEJfY4pyOrqahcYxnaq&limit=25&until=1483326099&__paging_token=enc_AdBtPTrNppu8xpLcnSYGmdAnZBZCxHeNQVZCZAXf6ptMRsuGo8rUjJOB7OvhM3o7pa8ERb0WHr5xkEOm4P3ysEBlKeyRA8k8qHsOaF4Eguw0WcLhSAZDZD" 
 
    } 
 
    }, 
 
    "id": "684985445000793" 
 
}; 
 
for (var i = 0; i < postinf.posts.data.length; i++){ 
 
\t var post = postinf.posts.data[i].message; 
 
    var postlnk = postinf.posts.data[i].permalink_url; 
 
    var time = postinf.posts.data[i].created_time; 
 
    $('#fb-feed').html('<a href="' + postlnk + '">' + post + '<br /> <br />@' + time + '<br /> <br />'); 
 
    console.log("post:", post); 
 
    console.log("postlnk:", postlnk); 
 
    console.log("time:", time); 
 
}
#fb-feed{ 
 
width: 100%; 
 
    background-color: #ea0; 
 
    font-weight: color; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<div id="fb-feed"></div>

這是否幫助?

+0

完美的for循環是固定的。該示例刪除我的功能,以顯示結果在我的div雖然 –

+0

您可以取消註釋的jQuery線附加您的div與新內容 –

+0

我剛更新我的運行代碼答案更新您的div –