遇到.append()的问题

时间:2017-01-15 19:38:45

标签: jquery html facebook

我正在获取facebook图表api响应,然后尝试将其附加到我的html页面上的div。

返回的数据格式为

{
  "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;
}
?>

提前感谢能够帮助我解决此问题的任何人。

1 个答案:

答案 0 :(得分: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;
}

以下是一个正在运行的示例:

&#13;
&#13;
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++){
	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);
}
&#13;
#fb-feed{
 width: 100%;
  background-color: #ea0;
  font-weight: color;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div id="fb-feed"></div>
&#13;
&#13;
&#13;

这有帮助吗?