Typeahead v0.10.2 & Bloodhound - работа с вложенными объектами JSON

UPDATE

Основываясь на правильном ответе от @BenSmith (https://stackoverflow.com/users/203371/BenSmith), я смог найти свою проблему и выяснил, что я не перешел через свою иерархию JSON должным образом. Вот рабочий код:

        // instantiate the bloodhound suggestion engine
    var engine = new Bloodhound({
        datumTokenizer: function (datum) {
            return Bloodhound.tokenizers.whitespace(datum.title);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: {
            url: "SampleData.json",
            filter: function (data) {
                //console.log("data", data.response.songs)
                return $.map(data.response.songs, function (song) {
                    return {
                        title: song.title,
                        artistName: song.artist_name
                    };
                });
            }
        }
    });

    // initialize the bloodhound suggestion engine
    engine.initialize();

    // instantiate the typeahead UI
    $('#prefetch .typeahead').typeahead(
      {
          hint: true,
          highlight: true,
          minLength: 1
      },
      {
          name: 'engine',
          displayKey: 'title',
          source: engine.ttAdapter(),
          templates: {
              empty: [
              '<div class="empty-message">',
              'unable to find any results that match the current query',
              '</div>'
              ].join('\n'),
              suggestion: Handlebars.compile('<p><strong>{{title}}</strong> by {{artistName}}</p>')
          }
      });

Спасибо @BenSmith за помощь!

Оригинальный вопрос

Я новичок в работе с Typeahead и Bloodhound. Документация не очень помогает. У меня есть набор объектов JSON, которые я получаю от API, с которым я работаю. Я пытаюсь понять, как перемещаться по моим объектам JSON, чтобы Bloodhound мог их понять.

Цель: пользователь начнет вводить имя песни. Затем автозаполнение отобразит список имен песен и исполнителя, в котором он был выполнен.

Например: Перезвоны в полночь Мастодоном

Я использую последние версии каждой библиотеки: https://twitter.github.io/typeahead.js/

Образец JSON (SampleData.json):

{"response": {"status": {"version": "4.2", "code": 0, "message": "Success"}, "songs": [{"title": "Chimes At Midnight", "artist_name": "Mastodon", "artist_foreign_ids": [{"catalog": "7digital-AU", "foreign_id": "7digital-AU:artist:29785"}, {"catalog": "7digital-UK", "foreign_id": "7digital-UK:artist:29785"}], "tracks": [], "artist_id": "ARMQHX71187B9890D3", "id": "SOKSFNN1463B7E4B1E"}, {"title": "Down Under", "artist_name": "Men at Work", "artist_foreign_ids": [{"catalog": "7digital-AU", "foreign_id": "7digital-AU:artist:50611"}], "tracks": [], "artist_id": "AR4MVC71187B9AEAB3", "id": "SORNNEB133A920BF86"}]}}

Используйте этот сайт http://json.parser.online.fr/, чтобы легко форматировать JSON.

JSON, я вернусь, всегда будет в том же формате, но содержит разные данные. В этом примере "дорожки" имеют значение NULL. Другие результаты будут иметь данные. Мне также нужно будет иметь доступ к этим данным.

Я использую последнюю версию JQuery. Вот что я включил в мою страницу html:

<script src="Scripts/jquery-2.1.1.min.js"></script>
<script src="Scripts/typeahead.bundle.min.js"></script>

Вот HTML:

<div id="prefetch">
    <input class="typeahead" type="text" placeholder="Songs...">
</div>

Вот script:

    // instantiate the bloodhound suggestion engine
    var engine = new Bloodhound({
        datumTokenizer: function (d) { return Bloodhound.tokenizers.whitespace(d.tokens.join(' ')); },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: {
            url: "SampleData.json",
            filter: function (response) {
                return response.engine;
            }
        }
    });

    // initialize the bloodhound suggestion engine
    engine.initialize();

    // instantiate the typeahead UI
    $('#prefetch .typeahead').typeahead(
      {
          hint: true,
          highlight: true,
          minLength: 1
      },
      {
          name: 'songs',
          displayKey: function (engine) {
              return engine.songs.artist_name;
          },
          source: engine.ttAdapter()
      });

Когда я пытаюсь запустить этот код, я получаю следующую ошибку:

Uncaught TypeError: Невозможно прочитать "токены" свойств undefined

Любая помощь или руководство здесь будут очень признательны. Мне просто нужно знать, как получить данные JSON, с которыми я работаю, работая с Typeahead/Bloodhound.

Спасибо!

Ответы

filter: function (response) {
            return $.map(response.songs, function (song) {
                return {
                    title: song.title,
                    artistName: song.artist_name
                };
            });
        }

datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.title);
    }

displayKey: 'title'

suggestion: Handlebars.compile('<p><strong>{{title}}</strong> by {{artistName}}</p>')

<div id="prefetch">
  <input class="typeahead" type="text" placeholder="Countries">
</div>

    var tags = new Bloodhound({
        datumTokenizer: function(datum) {
            return Bloodhound.tokenizers.whitespace(datum.name);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: {
            url: 'http://www.yourwebsite.com/js/data.json',
            cache: false,
            transform: function(response) {
                return $.map(response, function (tag) {
                    return {
                        name: tag.tagName,
                        id: tag.tagId
                    }
                });
            }
        }
    });

    $('#prefetch .typeahead').typeahead({
        minLength: 3,
        highlight: true
    }, {
        name: 'tags-dataset',
        source: tags,
        display: 'name'
    });