Arhn - архитектура программирования

Использование typeahead.js для возврата списка друзей Facebook

Я использую API-интерфейс Facebook Graph, чтобы вернуть список друзей Facebook. Затем я хочу запустить возвращенный JSON в Typeahead.js следующим образом:

$(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
    });
});

Мой соответствующий HTML выглядит следующим образом:

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

Но ничего не возвращается с помощью предварительной выборки (с жестко закодированными локальными значениями, без проблем). Я не вижу никаких ошибок в консоли, касающихся междоменных проблем.

Я почти уверен, что это потому, что Typeahead не сказали, как обрабатывать структуру JSON, но я не уверен, как этого добиться. Я пытался внедрить систему шаблонов Hogan (с которой, признаюсь, не знаком), но это не помогло.

Любые идеи высоко ценятся.

Большое спасибо

facebook facebook-graph-api typeahead.js typeahead twitter-typeahead
02.02.2014

Ответы:


1

Вам нужно либо использовать valueKey, если результатом является простой список объектов, из которых вы хотите использовать определенный ключ в качестве своих значений, либо, альтернативно, использовать filter:, чтобы преобразовать результат в плоский список предложений.

В вашем случае ответ представляет собой объект с членом data, который представляет собой список пар name, id. Вы можете сделать filter() функцией, которая возвращает response.data (для извлечения списка из члена data), а затем установить valueKey в name.

03.02.2014

2

Спасибо Ницан.

Мой фрагмент кода в настоящее время выглядит так:

          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

Который возвращает ВСЕ имена в JSON сразу, независимо от того, что находится в поле ввода.

Это проблема с фильтром или что-то другое?

09.02.2014

3

Решение ниже. Не забудьте включить Hogan, если вы используете его в качестве механизма шаблонов, как это сделал я:

        $.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
            });
          })
12.02.2014
Новые материалы
Коллекции публикаций по глубокому обучению
Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
Представляем: Pepita
Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
Советы по коду Laravel #2
1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
3 способа решить квадратное уравнение (3-й мой любимый) -
1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
Создание VR-миров с A-Frame
Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
Демистификация рекурсии
КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..