如何为Facebook好友搜索实现Typeahead JS

我已经看到了这个问题。但这使用旧的Bootstrap Typeahead，我现在正在尝试使用Typeahead JS自动完成Facebook好友。好吧，我想做的是从Facebook获取朋友列表并使用它来填写输入文本字段。我正在使用以下代码行获取Facebook好友列表。

FB.login(function(response) {
    if (response.authResponse) {
        var uid = response.authResponse.userID;
        access_token = response.authResponse.accessToken;
        //alert('login success');
        $.getJSON("https://graph.facebook.com/me/friends?access_token=" + access_token, function(result) {
            var friends_list = result;
            alert(friends_list.data[0].name);
        });
    } else {
        //alert('not logged in');
        location.reload();
    }
});

此代码位于登录页面 （/） 中。这非常有效，警报功能可以正确显示名称。在此之后，我希望它与Typeahead JS一起使用，我需要为此提供JSON预取URL。当我尝试在另一个页面/login/landing中与Typeahead JS使用相同的URL时，控制台显示403错误。

我尝试在Typeahead JS中使用它，如下所示：

  $(document).ready(function() {
      $('.example-countries .typeahead').typeahead({
          name: 'jsonvar_string',
          prefetch: "'https://graph.facebook.com/me/friends?access_token='+access_token",
          template: ['<p class="repo-language">{{data{{name}}}}</p>', '<p class="repo-name">{{data{{id}}}}</p>'].join(''),
          engine: Hogan
      });
  });

它没有用。因此，我尝试解析 Javascript 变量以仅获取朋友的名字，并在 Typeahead 中使用 JSON 对象作为"local"参数，如下所示：

FB.login(function(response) {
    if (response.authResponse) {
        //alert('Hi there');
        var uid = response.authResponse.userID;
        access_token = response.authResponse.accessToken;
        alert('login success');
        $.getJSON("https://graph.facebook.com/me/friends?access_token=" + access_token, function(result) {
            var friends_list = result;
            var friends_list_length = Object.keys(friends_list.data).length;
            var jsonvar = [];
            for (var i = 0; i < friends_list_length; i++) {
                jsonvar.push(friends_list.data[i].name);
            }
            jsonvar_string = JSON.stringify(jsonvar);
            localStorage.jsonvalue = jsonvar_string;
            window.location.href = "/login/landing";
        });
    } else {
        alert('not logged in');
        location.reload();
    }
});

即使这样也行不通。我的Facebook的API调用返回如下JSON：

{
   "data": [
      {
         "name": "ABCD",
         "id": "1234455"
      },
      {
         "name": "PQRSTV",
         "id": "789456"
      },
      {
         "name": "LKJHMN",
         "id": "456789"
      }
   ],
   "paging": {
      "next": "https://graph.facebook.com/12343434/friends?access_token=CAAJVBDOfUeQBAadfASDFdfdkdERdfdg8pVgJCMbSwIkWyQ0tIjNwoPPIjni7JeMyMbkeTNmxsKRiUe3q0h74Ngl3Ylue2Oz0XlepxUgZBoASpkSted2WV414ziawNZAHW68vLgCArRyxC8vNPeVmoZAueqnL1COrdSvkSItkVXbYVbueUZAhyBwZDZD&limit=5000&offset=5000&__after_id=100006343431073"
   }
}

无论如何，解析我收到的JSON以直接在Typeahead JS中使用它或任何其他实现它的方式？