javascript - Search for Track using Spotify API add in Album name and Artist name -

Working on Quick Project to discover a music track in Spotify ... you can track your track name in the text field Add and Produce A list of matching track IDs with artist name and album name + artwork ... The example below is an example of the code that I have worked so far ... album name / album image and artist Getting the name stuck ...

Example - I use I was doing: Track: All of my results should be Artist: John Legend Track ID is correct: 3U4isOIWM3VvDubwSI3y7a

Shows as before ....

Apart from this (this bit has been updated ...)

{{name}} - {{this.artists.name}} is trying to add code for the handler. JS to get the artist name from JSN data ...

For the first example ....

Using the correct JS / Handlar.JS and HTML ... .... any help would be great ... try {{artists .name}} but nothing is happening ...

  & lt; Div class = "container" & gt; & Lt; H1 & gt; Search for a track - Spotify & lt; / H1> & Lt; Form id = "search-form" & gt; & Lt; Input type = "text" id = "query" value = "" class = "form-control" /> & Lt; Input type = "submit" id = "search" category = "btn btn-primary" value = "search" /> & Lt; / Form & gt; & Lt; Div id = "result" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Script id = "result-template" type = "text / x-handler-template" & gt; {{#each tracks.items}} & lt; Div & gt; {{Id}} - & lt; Br / & gt; {{Name}} & lt; Br / & gt; & Lt; / Div & gt; // Problem - Image & lt; Div style = "border: 1px solid red; background-image: url ({{images.2.url}})" data-album-id = "{{id}}" class = "" & gt; & Lt; / Div & gt; // Score - Artist's name and album name & lt; Div style = "border: 1px solid green;" & Gt; Artist's name = {} - Album name = {} & lt; / Div & gt;  

Part of the JavaScript code -

  & lt; Script & gt; Var templateSource = document.getElementById ('result-template'). Internal HTML, template = handlurs.com, result player = document.getElementById ('result'), playing css class = 'playing', audio object = zero; Var fetchTracks = function (albumId, callback) {$ .ajax ({url: 'https://api.spotify.com/v1/albums/' + albumId, success: function (feedback) {callback (response)}} ); }; Var Search Albums = Function (query) {$. Ajax ({url: 'https://api.spotify.com/v1/search', data: {q: query, type: 'track' // track-search queries}, success: function (feedback) {ResultsPlaceholder.innerHTML = Template (feedback);}}); }; // This was to play the track in your window ... not working in track format ... results.addEventListener ('click', function (e) {var target = e.target; if (target! == tap & Amp;;; target.classList.contains ('cover')) {if (target.classList.contains (playing css class)) {audioObject.pause ();} else {if (audioObject) {audioObject.pause (); } FetchTracks (Target.getAttribute ('data-album-id'), function (data) {audioObject = new audio (data.tracks.items [0] .preview_url); AudioAbstract.play (); target.classList.add PlayingCssClass; AudioObject.addEventListener ('Finish', function () {target.classList.remove (Playing CSS class);}); AudioObact.Adive Telisr ( 'Pause' function) {target.classList.remove (playingCssClass);});});}}}); Document.getElementById ('Search-Forms'). AddEventListener ('Submit', function (e) {e.preventDefault (); Search albums (document.getElementById ('query'). Value);}, Incorrect); & Lt; / Script & gt;  

thanks Simon

BALD EXAMPLE - Handlebar album with examples Getting the information in the right format - Image / artist, album type and album name .... Hopefully useful for others ....

 < Code> & lt; Script id = "results-template" type = "text / x-handlebars-template" & gt; {{#each tracks.items}} & lt; Div & gt; {{Id}} - & lt; Br / & gt; {{Name}} & lt; Br / & gt; & Lt; / Div & gt; & Lt; Div style = "border: 1px solid red; background-image: url ({{album.images.2.url}})" data-album-id = "{{id}}" square = "cover" & gt; & Lt; / Div & gt; & Lt; Div style = "border: 1 px solid green;" & Gt; Artist's name = {{artists .0.name}} & lt; / Div & gt; & Lt; Div style = "border: 1 px solid green;" & Gt; Album type = {{album.album_type}} & lt; / Div & gt; & Lt; Div style = "border: 1 px solid green;" & Gt; Album Name = {{album.name}} & lt; / Div & gt; {{/ Every}} & lt; / Script & gt;  

Thank you looking at all this - now it's fixed ... Cheers Simon