title: Typeahead v0.10.2 & Bloodhound - Working With Nested JSON Objects
body: <p><strong>UPDATE</strong></p>
  
  <p>Based on the correct answer from @BenSmith (<a href="https://stackoverflow.com/users/203371/BenSmith">https://stackoverflow.com/users/203371/BenSmith</a>) I was able to find my problem and found out I was not navigating through my JSON hierarchy properly. Here is the working code:</p>
  
  <pre><code>        // 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: [
                '&lt;div class="empty-message"&gt;',
                'unable to find any results that match the current query',
                '&lt;/div&gt;'
                ].join('\n'),
                suggestion: Handlebars.compile('&lt;p&gt;&lt;strong&gt;{{title}}&lt;/strong&gt; by {{artistName}}&lt;/p&gt;')
            }
        });
  </code></pre>
  
  <p>Thanks @BenSmith for the help!</p>
  
  <hr>
  
  <p><strong>Original Question</strong></p>
  
  <p>I am new to working with Typeahead and Bloodhound. The documentation is not very helpful. I have a set of JSON objects that I get back from an API I am working with. I am trying to figure out how to navigate through my JSON objects so that Bloodhound can understand them.</p>
  
  <p>The goal here is a user will start to type a song name. The autocomplete will then display a list of song names and the artist it was performed by.</p>
  
  <p>For Example: <em>Chimes At Midnight by Mastodon</em></p>
  
  <p>I am using the latest versions of each library:
  <a href="https://twitter.github.io/typeahead.js/" rel="noreferrer">https://twitter.github.io/typeahead.js/</a></p>
  
  <p>The sample JSON (SampleData.json):</p>
  
  <pre>
  {"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"}]}}
  </pre>
  
  <p>Use this site <a href="http://json.parser.online.fr/" rel="noreferrer">http://json.parser.online.fr/</a> to format the JSON easily.</p>
  
  <p>The JSON I will get back will always be in the same format, but contain different data. In this example, the "tracks" are null. Other results will have data. I would also need to be able to access that data as well.</p>
  
  <p>I am using the latest version of JQuery. Here is what I have included in my html page:</p>
  
  <pre><code>&lt;script src="Scripts/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="Scripts/typeahead.bundle.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div id="prefetch"&gt;
      &lt;input class="typeahead" type="text" placeholder="Songs..."&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the script:</p>
  
  <pre><code>    // 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()
        });
  </code></pre>
  
  <p>When I try to run this code I get the following error:</p>
  
  <p><strong>Uncaught TypeError: Cannot read property 'tokens' of undefined</strong></p>
  
  <p>Any help or direction here would be greatly appreciated. I just need to know how to get the JSON data I am working with working with Typeahead/Bloodhound.</p>
  
  <p>Thanks!</p>