Ajax request, when formatting the results, certain elements fail if I add over 2 lines of code
up vote
2
down vote
favorite
Sorry for the very weird wording of that question, I don't know how to explain it. Basically, I have a text input that acts as a search. Whenever you type a letter or word in, it makes a request to the Spotify API and returns the 5 best matching results; the code is below.
$("#SongSearch").keyup(function()
$.ajax(
url: "https://api.spotify.com/v1/search?q=" + encodeURI(document.getElementById("SongSearch").value) + "&type=track&market=US&limit=5&offset=0",
headers:
'Authorization': 'Bearer ' + access_token
,
success: function(InfoGained)
document.getElementById("result1").innerHTML = InfoGained.tracks.items[0].name + ", " + InfoGained.tracks.items[0].artists[0].name;
document.getElementById("result2").innerHTML = InfoGained.tracks.items[1].name + ", " + InfoGained.tracks.items[1].artists[1].name;
document.getElementById("result3").innerHTML = InfoGained.tracks.items[2].name + ", " + InfoGained.tracks.items[2].artists[2].name;
document.getElementById("result4").innerHTML = InfoGained.tracks.items[3].name + ", " + InfoGained.tracks.items[3].artists[3].name;
document.getElementById("result5").innerHTML = InfoGained.tracks.items[4].name + ", " + InfoGained.tracks.items[4].artists[4].name;
);
);
This code correctly calls the API and gets the results. However, when formatting it, if I add more than two of the document.getElementByID... lines in, only two lines work. Example, this works:
$("#SongSearch").keyup(function()
$.ajax(
url: "https://api.spotify.com/v1/search?q=" + encodeURI(document.getElementById("SongSearch").value) + "&type=track&market=US&limit=5&offset=0",
headers:
'Authorization': 'Bearer ' + access_token
,
success: function(InfoGained)
document.getElementById("result1").innerHTML = InfoGained.tracks.items[0].name + ", " + InfoGained.tracks.items[0].artists[0].name;
document.getElementById("result2").innerHTML = InfoGained.tracks.items[1].name + ", " + InfoGained.tracks.items[1].artists[1].name;
);
);
But more than two lines of the document.getElementID..., such as the first segment of code listed results in the error: "Uncaught TypeError: Cannot read property 'name' of undefined". Any help is appreciated as I truly have no idea what is causing this. Thanks in advance,
Justin
javascript jquery json spotify
asked Nov 10 at 15:41
Justluce
141
add a comment |
up vote
2
down vote
favorite
Sorry for the very weird wording of that question, I don't know how to explain it. Basically, I have a text input that acts as a search. Whenever you type a letter or word in, it makes a request to the Spotify API and returns the 5 best matching results; the code is below.
$("#SongSearch").keyup(function()
$.ajax(
url: "https://api.spotify.com/v1/search?q=" + encodeURI(document.getElementById("SongSearch").value) + "&type=track&market=US&limit=5&offset=0",
headers:
'Authorization': 'Bearer ' + access_token
,
success: function(InfoGained)
document.getElementById("result1").innerHTML = InfoGained.tracks.items[0].name + ", " + InfoGained.tracks.items[0].artists[0].name;
document.getElementById("result2").innerHTML = InfoGained.tracks.items[1].name + ", " + InfoGained.tracks.items[1].artists[1].name;
document.getElementById("result3").innerHTML = InfoGained.tracks.items[2].name + ", " + InfoGained.tracks.items[2].artists[2].name;
document.getElementById("result4").innerHTML = InfoGained.tracks.items[3].name + ", " + InfoGained.tracks.items[3].artists[3].name;
document.getElementById("result5").innerHTML = InfoGained.tracks.items[4].name + ", " + InfoGained.tracks.items[4].artists[4].name;
);
);
This code correctly calls the API and gets the results. However, when formatting it, if I add more than two of the document.getElementByID... lines in, only two lines work. Example, this works:
$("#SongSearch").keyup(function()
$.ajax(
url: "https://api.spotify.com/v1/search?q=" + encodeURI(document.getElementById("SongSearch").value) + "&type=track&market=US&limit=5&offset=0",
headers:
'Authorization': 'Bearer ' + access_token
,
success: function(InfoGained)
document.getElementById("result1").innerHTML = InfoGained.tracks.items[0].name + ", " + InfoGained.tracks.items[0].artists[0].name;
document.getElementById("result2").innerHTML = InfoGained.tracks.items[1].name + ", " + InfoGained.tracks.items[1].artists[1].name;
);
);
But more than two lines of the document.getElementID..., such as the first segment of code listed results in the error: "Uncaught TypeError: Cannot read property 'name' of undefined". Any help is appreciated as I truly have no idea what is causing this. Thanks in advance,
Justin
javascript jquery json spotify
asked Nov 10 at 15:41
Justluce
141
1) Why aren't you using jQuery for those element selections? 2) You should add a sample of the ajax response to your question because you're likely selecting a property from a non-existent array element.
– Andy
Nov 10 at 15:44
I guess you really want to checkartists[0].namefor all tracks. Not many tracks have 5 artists.
– Frax
Nov 10 at 15:47
1
Also, try learning how to debug your code. You really have everything in the error message here, and you could probably find the error quickly by inspecting the response withconsole.log(InfoGained)or something similar. It's simply much faster to find it yourself.
– Frax
Nov 10 at 15:54
Okay, so, some clarifications. Each call works individually. so if I called tracks.items[4].name + ... it works, so I know that's not the problem. It's only when I call them together/call more than 2 that it gives an error. Also, its getting the artist of each track individually, not getting 5 artists from one track.
– Justluce
Nov 10 at 16:00
You should create a loop to loop over the array and handle specific instance inside the loop
– charlietfl
Nov 10 at 16:04
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
Sorry for the very weird wording of that question, I don't know how to explain it. Basically, I have a text input that acts as a search. Whenever you type a letter or word in, it makes a request to the Spotify API and returns the 5 best matching results; the code is below.
$("#SongSearch").keyup(function()
$.ajax(
url: "https://api.spotify.com/v1/search?q=" + encodeURI(document.getElementById("SongSearch").value) + "&type=track&market=US&limit=5&offset=0",
headers:
'Authorization': 'Bearer ' + access_token
,
success: function(InfoGained)
document.getElementById("result1").innerHTML = InfoGained.tracks.items[0].name + ", " + InfoGained.tracks.items[0].artists[0].name;
document.getElementById("result2").innerHTML = InfoGained.tracks.items[1].name + ", " + InfoGained.tracks.items[1].artists[1].name;
document.getElementById("result3").innerHTML = InfoGained.tracks.items[2].name + ", " + InfoGained.tracks.items[2].artists[2].name;
document.getElementById("result4").innerHTML = InfoGained.tracks.items[3].name + ", " + InfoGained.tracks.items[3].artists[3].name;
document.getElementById("result5").innerHTML = InfoGained.tracks.items[4].name + ", " + InfoGained.tracks.items[4].artists[4].name;
);
);
This code correctly calls the API and gets the results. However, when formatting it, if I add more than two of the document.getElementByID... lines in, only two lines work. Example, this works:
$("#SongSearch").keyup(function()
$.ajax(
url: "https://api.spotify.com/v1/search?q=" + encodeURI(document.getElementById("SongSearch").value) + "&type=track&market=US&limit=5&offset=0",
headers:
'Authorization': 'Bearer ' + access_token
,
success: function(InfoGained)
document.getElementById("result1").innerHTML = InfoGained.tracks.items[0].name + ", " + InfoGained.tracks.items[0].artists[0].name;
document.getElementById("result2").innerHTML = InfoGained.tracks.items[1].name + ", " + InfoGained.tracks.items[1].artists[1].name;
);
);
But more than two lines of the document.getElementID..., such as the first segment of code listed results in the error: "Uncaught TypeError: Cannot read property 'name' of undefined". Any help is appreciated as I truly have no idea what is causing this. Thanks in advance,
Justin
javascript jquery json spotify
asked Nov 10 at 15:41
Justluce
141
Sorry for the very weird wording of that question, I don't know how to explain it. Basically, I have a text input that acts as a search. Whenever you type a letter or word in, it makes a request to the Spotify API and returns the 5 best matching results; the code is below.
$("#SongSearch").keyup(function()
$.ajax(
url: "https://api.spotify.com/v1/search?q=" + encodeURI(document.getElementById("SongSearch").value) + "&type=track&market=US&limit=5&offset=0",
headers:
'Authorization': 'Bearer ' + access_token
,
success: function(InfoGained)
document.getElementById("result1").innerHTML = InfoGained.tracks.items[0].name + ", " + InfoGained.tracks.items[0].artists[0].name;
document.getElementById("result2").innerHTML = InfoGained.tracks.items[1].name + ", " + InfoGained.tracks.items[1].artists[1].name;
document.getElementById("result3").innerHTML = InfoGained.tracks.items[2].name + ", " + InfoGained.tracks.items[2].artists[2].name;
document.getElementById("result4").innerHTML = InfoGained.tracks.items[3].name + ", " + InfoGained.tracks.items[3].artists[3].name;
document.getElementById("result5").innerHTML = InfoGained.tracks.items[4].name + ", " + InfoGained.tracks.items[4].artists[4].name;
);
);
This code correctly calls the API and gets the results. However, when formatting it, if I add more than two of the document.getElementByID... lines in, only two lines work. Example, this works:
$("#SongSearch").keyup(function()
$.ajax(
url: "https://api.spotify.com/v1/search?q=" + encodeURI(document.getElementById("SongSearch").value) + "&type=track&market=US&limit=5&offset=0",
headers:
'Authorization': 'Bearer ' + access_token
,
success: function(InfoGained)
document.getElementById("result1").innerHTML = InfoGained.tracks.items[0].name + ", " + InfoGained.tracks.items[0].artists[0].name;
document.getElementById("result2").innerHTML = InfoGained.tracks.items[1].name + ", " + InfoGained.tracks.items[1].artists[1].name;
);
);
But more than two lines of the document.getElementID..., such as the first segment of code listed results in the error: "Uncaught TypeError: Cannot read property 'name' of undefined". Any help is appreciated as I truly have no idea what is causing this. Thanks in advance,
Justin
javascript jquery json spotify
javascript jquery json spotify
asked Nov 10 at 15:41
Justluce
141
asked Nov 10 at 15:41
Justluce
141
asked Nov 10 at 15:41
Justluce
141
asked Nov 10 at 15:41
Justluce
141
asked Nov 10 at 15:41
Justluce
141
141
1) Why aren't you using jQuery for those element selections? 2) You should add a sample of the ajax response to your question because you're likely selecting a property from a non-existent array element.
– Andy
Nov 10 at 15:44
I guess you really want to checkartists[0].namefor all tracks. Not many tracks have 5 artists.
– Frax
Nov 10 at 15:47
1
Also, try learning how to debug your code. You really have everything in the error message here, and you could probably find the error quickly by inspecting the response withconsole.log(InfoGained)or something similar. It's simply much faster to find it yourself.
– Frax
Nov 10 at 15:54
Okay, so, some clarifications. Each call works individually. so if I called tracks.items[4].name + ... it works, so I know that's not the problem. It's only when I call them together/call more than 2 that it gives an error. Also, its getting the artist of each track individually, not getting 5 artists from one track.
– Justluce
Nov 10 at 16:00
You should create a loop to loop over the array and handle specific instance inside the loop
– charlietfl
Nov 10 at 16:04
add a comment |
1) Why aren't you using jQuery for those element selections? 2) You should add a sample of the ajax response to your question because you're likely selecting a property from a non-existent array element.
– Andy
Nov 10 at 15:44
I guess you really want to checkartists[0].namefor all tracks. Not many tracks have 5 artists.
– Frax
Nov 10 at 15:47
1
Also, try learning how to debug your code. You really have everything in the error message here, and you could probably find the error quickly by inspecting the response withconsole.log(InfoGained)or something similar. It's simply much faster to find it yourself.
– Frax
Nov 10 at 15:54
Okay, so, some clarifications. Each call works individually. so if I called tracks.items[4].name + ... it works, so I know that's not the problem. It's only when I call them together/call more than 2 that it gives an error. Also, its getting the artist of each track individually, not getting 5 artists from one track.
– Justluce
Nov 10 at 16:00
You should create a loop to loop over the array and handle specific instance inside the loop
– charlietfl
Nov 10 at 16:04
1) Why aren't you using jQuery for those element selections? 2) You should add a sample of the ajax response to your question because you're likely selecting a property from a non-existent array element.
– Andy
Nov 10 at 15:44
1) Why aren't you using jQuery for those element selections? 2) You should add a sample of the ajax response to your question because you're likely selecting a property from a non-existent array element.
– Andy
Nov 10 at 15:44
I guess you really want to check
artists[0].name for all tracks. Not many tracks have 5 artists.– Frax
Nov 10 at 15:47
I guess you really want to check
artists[0].name for all tracks. Not many tracks have 5 artists.– Frax
Nov 10 at 15:47
1
1
Also, try learning how to debug your code. You really have everything in the error message here, and you could probably find the error quickly by inspecting the response with
console.log(InfoGained) or something similar. It's simply much faster to find it yourself.– Frax
Nov 10 at 15:54
Also, try learning how to debug your code. You really have everything in the error message here, and you could probably find the error quickly by inspecting the response with
console.log(InfoGained) or something similar. It's simply much faster to find it yourself.– Frax
Nov 10 at 15:54
Okay, so, some clarifications. Each call works individually. so if I called tracks.items[4].name + ... it works, so I know that's not the problem. It's only when I call them together/call more than 2 that it gives an error. Also, its getting the artist of each track individually, not getting 5 artists from one track.
– Justluce
Nov 10 at 16:00
Okay, so, some clarifications. Each call works individually. so if I called tracks.items[4].name + ... it works, so I know that's not the problem. It's only when I call them together/call more than 2 that it gives an error. Also, its getting the artist of each track individually, not getting 5 artists from one track.
– Justluce
Nov 10 at 16:00
You should create a loop to loop over the array and handle specific instance inside the loop
– charlietfl
Nov 10 at 16:04
You should create a loop to loop over the array and handle specific instance inside the loop
– charlietfl
Nov 10 at 16:04
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
I realized after staring at it for an hour or two that InfoGained.tracks.items[4].artists[4].name; is calling the 5th artist for the 5th song. It should have been InfoGained.tracks.items[4].artists[0].name; Thank you everyone, especially Frax, for the help!
answered Nov 10 at 17:25
Justluce
141
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
I realized after staring at it for an hour or two that InfoGained.tracks.items[4].artists[4].name; is calling the 5th artist for the 5th song. It should have been InfoGained.tracks.items[4].artists[0].name; Thank you everyone, especially Frax, for the help!
answered Nov 10 at 17:25
Justluce
141
add a comment |
up vote
0
down vote
I realized after staring at it for an hour or two that InfoGained.tracks.items[4].artists[4].name; is calling the 5th artist for the 5th song. It should have been InfoGained.tracks.items[4].artists[0].name; Thank you everyone, especially Frax, for the help!
answered Nov 10 at 17:25
Justluce
141
add a comment |
up vote
0
down vote
up vote
0
down vote
I realized after staring at it for an hour or two that InfoGained.tracks.items[4].artists[4].name; is calling the 5th artist for the 5th song. It should have been InfoGained.tracks.items[4].artists[0].name; Thank you everyone, especially Frax, for the help!
answered Nov 10 at 17:25
Justluce
141
I realized after staring at it for an hour or two that InfoGained.tracks.items[4].artists[4].name; is calling the 5th artist for the 5th song. It should have been InfoGained.tracks.items[4].artists[0].name; Thank you everyone, especially Frax, for the help!
answered Nov 10 at 17:25
Justluce
141
answered Nov 10 at 17:25
Justluce
141
answered Nov 10 at 17:25
Justluce
141
answered Nov 10 at 17:25
Justluce
141
141
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53240545%2fajax-request-when-formatting-the-results-certain-elements-fail-if-i-add-over-2%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1) Why aren't you using jQuery for those element selections? 2) You should add a sample of the ajax response to your question because you're likely selecting a property from a non-existent array element.
– Andy
Nov 10 at 15:44
I guess you really want to check
artists[0].namefor all tracks. Not many tracks have 5 artists.– Frax
Nov 10 at 15:47
1
Also, try learning how to debug your code. You really have everything in the error message here, and you could probably find the error quickly by inspecting the response with
console.log(InfoGained)or something similar. It's simply much faster to find it yourself.– Frax
Nov 10 at 15:54
Okay, so, some clarifications. Each call works individually. so if I called tracks.items[4].name + ... it works, so I know that's not the problem. It's only when I call them together/call more than 2 that it gives an error. Also, its getting the artist of each track individually, not getting 5 artists from one track.
– Justluce
Nov 10 at 16:00
You should create a loop to loop over the array and handle specific instance inside the loop
– charlietfl
Nov 10 at 16:04