-1

私はすでにこの質問を見ました。しかし、それは古い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で直接使用するか、それを実装する他の方法で使用しますか?

4

1 に答える 1

0

nameキーをvalueouに変換する必要がありますtokens。Typeahead.js は、これらのキーに書かれていることを認識して自動補完します。

私はTwitter APIで同じ問題を抱えていました。役に立つかもしれません: typeahead.js を twitter api と統合する方法

于 2013-11-20T03:23:16.447 に答える