jquery - .append() 有问题

Question

我收到一个 facebook graph 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 循环中做错了，但我不知道如何解决它，我基本上需要遍历数据。帖子不仅仅是数据将只包含帖子因此无需遍历数据，只需遍历数据中的帖子即可。

我目前的代码如下:

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

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

Answer 1

您需要像这样迭代 throw 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++){
	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>

这有帮助吗？