JQuery UI - автозаполнение списков друзей из Facebook Graph API с использованием JSONP - PullRequest
Новая
       11

JQuery UI - автозаполнение списков друзей из Facebook Graph API с использованием JSONP

1 голос
/ 11 августа 2011

Мне нужно получить массив JSON из API Graph Facebook. Я использую Facebook JS-SDK внутри функции jquery.

По сути, эта функция получает токен доступа от активного пользователя, а затем добавляет его к обратному вызову, чтобы получить список друзей из Graph API. Мне нужна функция автозаполнения пользовательского интерфейса, чтобы показать список друзей в выпадающем списке под элементом ввода.

Я могу правильно вызвать API графа, но не могу правильно настроить таргетинг на массив JSON в функции автозаполнения.

JS -> 

$(function() {

    //Facebook Connection
    FB.init({
        //Put app ID here
        appId: 'MYAPPID', 
        cookie: true, 
        xfbml: true, 
        status: true });

    //Function to output API call to console
    function log( message ) {
        $( "<div/>" ).text( message ).prependTo( "#log" );
        $( "#log" ).attr( "scrollTop", 0 );
    }

    //Check if logged in to FB
    FB.getLoginStatus(function (response) {
        if (response.session) {

            //Get Access Token
            var accessToken = response.session.access_token;
            //Get Callback URL for API call
            var tokenUrl = "https://graph.facebook.com/me/friends?access_token=" + accessToken + "&callback=?";

            //Output callback URL to 'div#access'
            $('#access').append('<p>' + tokenUrl + '</p>');

            $( "#name" ).autocomplete({
                source: function( request, response ) {
                    //Make call to Graph API
                    $.ajax({
                        //Use tokenUrl for callback URL
                        url: tokenUrl,
                        //Use JSONP for external JSON callback
                        dataType: "jsonp",
                        data: {
                            featureClass: "P",
                            style: "full",
                            maxRows: 12,
                            name_startsWith: function () { return $("#name").val() }
                        },
                        //Output request data to console
                        success: function(results){
                            console.log(results);
                        }
                    });
                },
                minLength: 2
            });

        } else {
            // Show Login....
        }
    });
});

HTML -> 

<div id="access"></div>
<input id="name" />
<div id="fb-root"></div>

Консоль js дает мне эти результаты -> 

Object
data: Array[304]
__proto__: Object

Таким образом, функция автозаполнения пользовательского интерфейса вызывается правильно, но элемент ввода не заполняется результатами, так как он получает весь массив, упакованный в оболочку «data».

Я думаю, мне нужно нацелить оболочку в массиве json для моих результатов, но я не знаю, как это сделать.

Заранее спасибо!

1 Ответ

1 голос
/ 11 августа 2011

Эту функцию необходимо изменить: 

$( "#name" ).autocomplete({
                source: function( request, response ) {
                    //Make call to Graph API
                    $.ajax({
                        //Use tokenUrl for callback URL
                        url: tokenUrl,
                        //Use JSONP for external JSON callback
                        dataType: "jsonp",
                        data: {
                            featureClass: "P",
                            style: "full",
                            maxRows: 12,
                            name_startsWith: function () { return $("#name").val() }
                        },
                        //Output request data to console
                        success: function(results){
                            console.log(results);
                        }
                    });
                },

на это: 

    $( "#name" ).autocomplete({
                source: function( request, add) {
                    //Make call to Graph API
                    $.ajax({
                        //Use tokenUrl for callback URL
                        url: tokenUrl,
                        //Use JSONP for external JSON callback
                        dataType: "jsonp",

                        //Output request data to console
                        success: function(results){
                            add(results.data); // //pass array to callback 
                        }
                    });
                },

параметр add отправит результаты обратно автозаполнению.

РЕДАКТИРОВАТЬ: Поскольку results.data возвращает массив объектов, каждый объект должен иметь либо значение, либо метку, либо оба свойства.

Например, 

var valid = results.data[0].label || results.data[0].value;
if (valid) {
   console.log('this is ok');
   add(results.data);
} else {
    // You need to format the result
    var formatted = [];
    for(var i = 0; i< results.data.length; i++) {
        // filter results   
        if (results.data[i].toLowerCase().indexOf($('#name').val()) > 0)
            formatted.push(results.data[i].whatever_field_is_the_label)
    }
    add(formatted);
}
...