私はすでにこの質問を見ました。しかし、それは古いBootstrap Typeaheadを使用しており、Facebookの友達のオートコンプリートにTypeahead JSを使用しようとしています。さて、私がやろうとしているのは、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();
}
});
このコードはログイン ページ (/) にあります。これは完全に機能し、アラート機能は名前を正しく表示します。この後、JSON プリフェッチ URL を指定する必要がある Typeahead JS で使用したいと考えています。別のページ /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 変数を解析して友人の名前だけを取得し、JSON オブジェクトをTypeaheadの「ローカル」パラメーターとして次のように使用しようとしました。
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で直接使用するか、それを実装する他の方法で使用しますか?