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










share|improve this question







New contributor




Justluce is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.




















  • 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






  • 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

















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










share|improve this question







New contributor




Justluce is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.




















  • 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






  • 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















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










share|improve this question







New contributor




Justluce is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.











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






share|improve this question







New contributor




Justluce is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.











share|improve this question







New contributor




Justluce is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.









share|improve this question




share|improve this question






New contributor




Justluce is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.









asked Nov 10 at 15:41









Justluce

111




111




New contributor




Justluce is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.





New contributor





Justluce is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.






Justluce is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.












  • 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






  • 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




















  • 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






  • 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


















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














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!






share|improve this answer








New contributor




Justluce is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.


















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });






    Justluce is a new contributor. Be nice, and check out our Code of Conduct.










     

    draft saved


    draft discarded


















    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

























    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!






    share|improve this answer








    New contributor




    Justluce is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.






















      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!






      share|improve this answer








      New contributor




      Justluce is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.




















        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!






        share|improve this answer








        New contributor




        Justluce is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.









        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!







        share|improve this answer








        New contributor




        Justluce is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.









        share|improve this answer



        share|improve this answer






        New contributor




        Justluce is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.









        answered Nov 10 at 17:25









        Justluce

        111




        111




        New contributor




        Justluce is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.





        New contributor





        Justluce is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.






        Justluce is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.






















            Justluce is a new contributor. Be nice, and check out our Code of Conduct.










             

            draft saved


            draft discarded


















            Justluce is a new contributor. Be nice, and check out our Code of Conduct.













            Justluce is a new contributor. Be nice, and check out our Code of Conduct.












            Justluce is a new contributor. Be nice, and check out our Code of Conduct.















             


            draft saved


            draft discarded














            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





















































            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







            Popular posts from this blog

            Florida Star v. B. J. F.

            Danny Elfman

            Lugert, Oklahoma