Mal229 Mal229 - 2 months ago 6
jQuery Question

Jquery selector returning a random " in my function call

https://github.com/rajien2/Itunes

Hey guys,

I've been running my head into a wall for the past day now, this is a class project and I went outside of the requirements just to play with the google API. My function works, if you pass a string into the searchTube('bob') if will find the first video and pop up a youtube windows. The goal is to have this happen when you click on the cover art, now the issue I'm running into is I want to pass in the title of the song and the artist name. However, I get a random " in my return? Now I believeenter image description here this is due to the spaces, because when I just use the title and pick a title that has spaces the same result... Any idea how I can resolve this issue?

DevTools results

//Do Not Modify the getMusic function
function getMusic() {
var artist = document.getElementById('artist').value;
itunes.getMusicByArtist(artist).then(drawSongs);
}







function drawSongs(songList) {
console.log(songList);

var container = $('#music-container')
container.html('')
songList.forEach(function (song) {

let myItem = song.title
console.log(myItem)


var card = `
<div class='col-md-6'>
<p class='h4 text-center' href='${song.url}'>${song.title}</p>
<p class='h5 text-center' href='${song.url}'>${song.artist}</p>
<img onclick=searchTube(${song.title} ${song.artist}) class='center-block' src='${song.albumArt}'>
<div>
<audio controls class='center-block'>
<source src="${song.preview}" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
`

container.append(card)
myInfo = ''
})
}


Youtube searchTube function

function tplawesome(e, t) { res = e; for (var n = 0; n < t.length; n++) { res = res.replace(/\{\{(.*?)\}\}/g, function (e, r) { return t[n][r] }) } return res }


function searchTube(item) {

// get fourm input
q = item //$('#query').val()

//run request on api
$.get(
"https://www.googleapis.com/youtube/v3/search", {
part: 'snippet',
type: 'video',
q: q,
maxResults: 1,
order: 'viewCount',
key: 'AIzaSyD9YPjBHHTiMX_MpqKySSwIIGlxL1zuD9o'
},
function (data) {
console.log(data.items);
$.each(data.items, function (index, item) {
$.get('item.html', function (data) {
$('#results').append(tplawesome(data, [{ 'title': item.snippet.title, 'videoid': item.id.videoId }]))
})
//$('#results').append(item.id.videoId + ' ' + item.snippet.title + '<br>')
})
//$('results').append(item.id.videoId + ' ' + data.snippet.title + '<br>');


$('#my_popup').popup({
opacity: 0.3,
transition: 'all 0.3s'
});


}
);
}


//searchTube(test);

Answer

You are not correctly escaping the searchTube(${song.title} ${song.artist}) part of your code. Since you want to pass a string as the method parameter, you should signal this parameter as a string. Do this by enclosing your parameters into ''.

You will end up with:

<img onclick="searchTube('${song.title} ${song.artist}')"  class='center-block' src='${song.albumArt}'>