Using typeahead.js to return list of Facebook friends

Question

I am using the Facebook Graph API to return a list of Facebook friends. I then want to run the returned JSON into Typeahead.js as follows:

$(document).ready(function () {
    $('input.friends').typeahead({
        name: 'friends',
        prefetch: 'https://graph.facebook.com/me/friends?access_token=<?php echo $access_token;?>',
        ttl: 0,
        template: [
            '<p class="name-tag">{{name}}</p>'
          ].join(''),
             engine: Hogan
    });
});

My corresponding HTML is as follows:

<input class="friends typeahead" type="text" placeholder="Start typing" id="friends">

But nothing is being returned using the prefetch (with hardcoded, local values, no problem). I am not seeing any errors in the console regarding cross-domain issues.

I am fairly sure this is because Typeahead hasn't been told how to handle the JSON structure, but I am unsure how to achieve this. I have tried implementing the templating system Hogan (which I will admit to being unfamiliar with) but this has not helped.

Any ideas much appreciated.

Many thanks

Answer 1

Solution below. Remember to include Hogan if you're using that as your templating engine, as I have done:

        $.get('https://graph.facebook.com/me/friends?access_token=<?php echo $access_token;?>', function(server_data){

            var rt = {};
                    for (var i in server_data.data)
                      rt[server_data.data[i].id] = {name:server_data.data[i].name, id:server_data.data[i].id},
                       //rt.push({name:server_data.data[i].name})

              console.log(rt)

            $('input.friends').typeahead({
              limit: 10,
              name: 'friends',
              valueKey: 'name',

              local:rt,
              template: [
                  '{{id}}',
              ].join(''),
              engine: Hogan
            });
          })

Answer 2

You need to either use valueKey if the result is a simple list of objects, from which you want to use a specific key as your values, or alternatively use a filter: to convert the result into a flat list of suggestions.

In your case, the response is a object with a data member that is a list of name, id pairs. You can have filter() be a function that returns response.data (to extract the list from the data member), and then set valueKey to name.

Answer 3

Thanks Nitzan.

My code snippet currently looks like:

          valueKey: 'name',
          remote: {
              url: 'https://graph.facebook.com/me/friends?access_token=<?php echo $access_token;?>',
              filter: function (response) {
                  return response.data;
              },
          },
          template: [
              '<p>{{name}}</p>',
          ].join(''),
          engine: Hogan

Which returns ALL the names in the JSON at once, no matter what is in the input box.

Is this a problem with the filter or something else?