Typeahead v0.10.2 & Bloodhound - travailler avec des objets JSON emboîtés

UPDATE

basé sur la bonne réponse de @BenSmith (https://stackoverflow.com/users/203371/BenSmith) j'ai pu trouver mon problème et j'ai découvert que je ne naviguais pas correctement dans ma hiérarchie JSON. Voici le code qui fonctionne:

        // 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>')
          }
      });

Merci @BenSmith pour votre aide!

Question Originale

je commence à travailler avec Typeahead et Bloodhound. Le la documentation n'est pas très utile. J'ai un ensemble d'objets JSON que je récupère d'une API avec laquelle je travaille. J'essaie de trouver comment naviguer à travers mes objets JSON pour que ce Limier puisse les comprendre.

le but ici est qu'un utilisateur commence à taper un nom de chanson. L'autocomplete affichera alors une liste de noms de chansons et de l'artiste qui l'a jouée.

Par Exemple: sonneries à minuit par Mastodon

je suis en utilisant le dernières versions de chaque bibliothèque: https://twitter.github.io/typeahead.js/

l'échantillon 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"}]}}

utilisez ce site http://json.parser.online.fr/ pour formater le JSON facilement.

le JSON que je vais récupérer sera toujours dans le même format, mais contiendra des données différentes. Dans cet exemple, les "pistes" sont nulles. D'autres résultats ont des données. Il me faudrait aussi pouvoir accéder à ces données en tant que bien.

j'utilise la dernière version de JQuery. Voici ce que j'ai inclus dans ma page html:

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

voici le HTML:

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

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

Lorsque j'essaie d'exécuter ce code j'obtiens l'erreur suivante:

Uncaught TypeError: Cannot read property 'tokens' of undefined

N'importe quelle aide ou direction ici serait grandement appréciée. J'ai juste besoin de savoir comment obtenir les données JSON Je travaille avec Typeahead/Bloodhound.

Merci!