Why am I getting undefined as an answer when fetching data from an api?











up vote
0
down vote

favorite












I learning how to use fetch api and I am trying to print a quote from the Simpsons api as practice. The problem is that keep getting undefined as an answer. Do you know why it is not just printing the quote?



let button    = document.querySelector('#button')
let quote = document.querySelector('#quote')

function getInfoFetch(){

fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
.then(response => response.json())
.then((data) => {

quote.innerText = data.quote;

})
.catch(err => console.log(err));
}

button.addEventListener('click', getInfoFetch)









share|improve this question






















  • data[0].quote - because data in this case is an array
    – Bravo
    Nov 8 at 3:06












  • That should be an answer :P.
    – zozo
    Nov 8 at 3:07






  • 2




    I did, then I realised that 3 seconds of debugging is all it would take to fix such a basic issue @zozo - so I deleted the answer
    – Bravo
    Nov 8 at 3:20















up vote
0
down vote

favorite












I learning how to use fetch api and I am trying to print a quote from the Simpsons api as practice. The problem is that keep getting undefined as an answer. Do you know why it is not just printing the quote?



let button    = document.querySelector('#button')
let quote = document.querySelector('#quote')

function getInfoFetch(){

fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
.then(response => response.json())
.then((data) => {

quote.innerText = data.quote;

})
.catch(err => console.log(err));
}

button.addEventListener('click', getInfoFetch)









share|improve this question






















  • data[0].quote - because data in this case is an array
    – Bravo
    Nov 8 at 3:06












  • That should be an answer :P.
    – zozo
    Nov 8 at 3:07






  • 2




    I did, then I realised that 3 seconds of debugging is all it would take to fix such a basic issue @zozo - so I deleted the answer
    – Bravo
    Nov 8 at 3:20













up vote
0
down vote

favorite









up vote
0
down vote

favorite











I learning how to use fetch api and I am trying to print a quote from the Simpsons api as practice. The problem is that keep getting undefined as an answer. Do you know why it is not just printing the quote?



let button    = document.querySelector('#button')
let quote = document.querySelector('#quote')

function getInfoFetch(){

fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
.then(response => response.json())
.then((data) => {

quote.innerText = data.quote;

})
.catch(err => console.log(err));
}

button.addEventListener('click', getInfoFetch)









share|improve this question













I learning how to use fetch api and I am trying to print a quote from the Simpsons api as practice. The problem is that keep getting undefined as an answer. Do you know why it is not just printing the quote?



let button    = document.querySelector('#button')
let quote = document.querySelector('#quote')

function getInfoFetch(){

fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
.then(response => response.json())
.then((data) => {

quote.innerText = data.quote;

})
.catch(err => console.log(err));
}

button.addEventListener('click', getInfoFetch)






javascript ajax api fetch






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 8 at 3:04









bsmith

63




63












  • data[0].quote - because data in this case is an array
    – Bravo
    Nov 8 at 3:06












  • That should be an answer :P.
    – zozo
    Nov 8 at 3:07






  • 2




    I did, then I realised that 3 seconds of debugging is all it would take to fix such a basic issue @zozo - so I deleted the answer
    – Bravo
    Nov 8 at 3:20


















  • data[0].quote - because data in this case is an array
    – Bravo
    Nov 8 at 3:06












  • That should be an answer :P.
    – zozo
    Nov 8 at 3:07






  • 2




    I did, then I realised that 3 seconds of debugging is all it would take to fix such a basic issue @zozo - so I deleted the answer
    – Bravo
    Nov 8 at 3:20
















data[0].quote - because data in this case is an array
– Bravo
Nov 8 at 3:06






data[0].quote - because data in this case is an array
– Bravo
Nov 8 at 3:06














That should be an answer :P.
– zozo
Nov 8 at 3:07




That should be an answer :P.
– zozo
Nov 8 at 3:07




2




2




I did, then I realised that 3 seconds of debugging is all it would take to fix such a basic issue @zozo - so I deleted the answer
– Bravo
Nov 8 at 3:20




I did, then I realised that 3 seconds of debugging is all it would take to fix such a basic issue @zozo - so I deleted the answer
– Bravo
Nov 8 at 3:20












3 Answers
3






active

oldest

votes

















up vote
0
down vote



accepted










The data of second .then is an array with a object inside.
If you want to get quote in the object, you need to use data[0] to select the object.Then, use .quote to select the key quote in the object. And you can get the value you want.



let button = document.querySelector('#button');
let quote = document.querySelector('#quote');

function getInfoFetch(){
fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
.then(response => response.json())
.then((data) => {
console.log(data);
//this is an array with object(index = 0) inside [{...}]
quote.innerText = data[0].quote;
})
.catch(err => console.log(err));
}

button.addEventListener('click', getInfoFetch);





share|improve this answer























  • Thanks! That solved it!
    – bsmith
    Nov 8 at 16:05


















up vote
2
down vote













The API's response appears to be an array, which means you'll need to need to access the quote data from say, the first item of the array response.



You can do that by making the following change to your code:






let button = document.querySelector('#button')
let quote = document.querySelector('#quote')

function getInfoFetch(){

fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
.then(response => response.json())
.then((data) => {

// Access first item of data "array" to retrieve and display quote
quote.innerText = data[0].quote;

})
.catch(err => console.log(err));
}

button.addEventListener('click', getInfoFetch)

<button id="button">Get quote</button>
<div id="quote"></div>








share|improve this answer






























    up vote
    0
    down vote













    Data which you are parsing is of Array type



    [{"quote":"I can't even say the word 'titmouse' without gigggling like a schoolgirl.","character":"Homer Simpson","image":"https://cdn.glitch.com/3c3ffadc-3406-4440-bb95-d40ec8fcde72%2FHomerSimpson.png?1497567511939","characterDirection":"Right"}]


    So to read that you need to pass index as well



    fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
    .then(response => response.json())
    .then((data) => {

    quote.innerText = data[0].quote;

    })
    .catch(err => console.log(err));


    Here is working fiddle






    share|improve this answer























    • Thanks! It is working now!
      – bsmith
      Nov 8 at 16:05











    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
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53200964%2fwhy-am-i-getting-undefined-as-an-answer-when-fetching-data-from-an-api%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    3 Answers
    3






    active

    oldest

    votes








    3 Answers
    3






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    0
    down vote



    accepted










    The data of second .then is an array with a object inside.
    If you want to get quote in the object, you need to use data[0] to select the object.Then, use .quote to select the key quote in the object. And you can get the value you want.



    let button = document.querySelector('#button');
    let quote = document.querySelector('#quote');

    function getInfoFetch(){
    fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
    .then(response => response.json())
    .then((data) => {
    console.log(data);
    //this is an array with object(index = 0) inside [{...}]
    quote.innerText = data[0].quote;
    })
    .catch(err => console.log(err));
    }

    button.addEventListener('click', getInfoFetch);





    share|improve this answer























    • Thanks! That solved it!
      – bsmith
      Nov 8 at 16:05















    up vote
    0
    down vote



    accepted










    The data of second .then is an array with a object inside.
    If you want to get quote in the object, you need to use data[0] to select the object.Then, use .quote to select the key quote in the object. And you can get the value you want.



    let button = document.querySelector('#button');
    let quote = document.querySelector('#quote');

    function getInfoFetch(){
    fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
    .then(response => response.json())
    .then((data) => {
    console.log(data);
    //this is an array with object(index = 0) inside [{...}]
    quote.innerText = data[0].quote;
    })
    .catch(err => console.log(err));
    }

    button.addEventListener('click', getInfoFetch);





    share|improve this answer























    • Thanks! That solved it!
      – bsmith
      Nov 8 at 16:05













    up vote
    0
    down vote



    accepted







    up vote
    0
    down vote



    accepted






    The data of second .then is an array with a object inside.
    If you want to get quote in the object, you need to use data[0] to select the object.Then, use .quote to select the key quote in the object. And you can get the value you want.



    let button = document.querySelector('#button');
    let quote = document.querySelector('#quote');

    function getInfoFetch(){
    fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
    .then(response => response.json())
    .then((data) => {
    console.log(data);
    //this is an array with object(index = 0) inside [{...}]
    quote.innerText = data[0].quote;
    })
    .catch(err => console.log(err));
    }

    button.addEventListener('click', getInfoFetch);





    share|improve this answer














    The data of second .then is an array with a object inside.
    If you want to get quote in the object, you need to use data[0] to select the object.Then, use .quote to select the key quote in the object. And you can get the value you want.



    let button = document.querySelector('#button');
    let quote = document.querySelector('#quote');

    function getInfoFetch(){
    fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
    .then(response => response.json())
    .then((data) => {
    console.log(data);
    //this is an array with object(index = 0) inside [{...}]
    quote.innerText = data[0].quote;
    })
    .catch(err => console.log(err));
    }

    button.addEventListener('click', getInfoFetch);






    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Nov 8 at 3:25

























    answered Nov 8 at 3:19









    Jason Yang

    161




    161












    • Thanks! That solved it!
      – bsmith
      Nov 8 at 16:05


















    • Thanks! That solved it!
      – bsmith
      Nov 8 at 16:05
















    Thanks! That solved it!
    – bsmith
    Nov 8 at 16:05




    Thanks! That solved it!
    – bsmith
    Nov 8 at 16:05












    up vote
    2
    down vote













    The API's response appears to be an array, which means you'll need to need to access the quote data from say, the first item of the array response.



    You can do that by making the following change to your code:






    let button = document.querySelector('#button')
    let quote = document.querySelector('#quote')

    function getInfoFetch(){

    fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
    .then(response => response.json())
    .then((data) => {

    // Access first item of data "array" to retrieve and display quote
    quote.innerText = data[0].quote;

    })
    .catch(err => console.log(err));
    }

    button.addEventListener('click', getInfoFetch)

    <button id="button">Get quote</button>
    <div id="quote"></div>








    share|improve this answer



























      up vote
      2
      down vote













      The API's response appears to be an array, which means you'll need to need to access the quote data from say, the first item of the array response.



      You can do that by making the following change to your code:






      let button = document.querySelector('#button')
      let quote = document.querySelector('#quote')

      function getInfoFetch(){

      fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
      .then(response => response.json())
      .then((data) => {

      // Access first item of data "array" to retrieve and display quote
      quote.innerText = data[0].quote;

      })
      .catch(err => console.log(err));
      }

      button.addEventListener('click', getInfoFetch)

      <button id="button">Get quote</button>
      <div id="quote"></div>








      share|improve this answer

























        up vote
        2
        down vote










        up vote
        2
        down vote









        The API's response appears to be an array, which means you'll need to need to access the quote data from say, the first item of the array response.



        You can do that by making the following change to your code:






        let button = document.querySelector('#button')
        let quote = document.querySelector('#quote')

        function getInfoFetch(){

        fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
        .then(response => response.json())
        .then((data) => {

        // Access first item of data "array" to retrieve and display quote
        quote.innerText = data[0].quote;

        })
        .catch(err => console.log(err));
        }

        button.addEventListener('click', getInfoFetch)

        <button id="button">Get quote</button>
        <div id="quote"></div>








        share|improve this answer














        The API's response appears to be an array, which means you'll need to need to access the quote data from say, the first item of the array response.



        You can do that by making the following change to your code:






        let button = document.querySelector('#button')
        let quote = document.querySelector('#quote')

        function getInfoFetch(){

        fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
        .then(response => response.json())
        .then((data) => {

        // Access first item of data "array" to retrieve and display quote
        quote.innerText = data[0].quote;

        })
        .catch(err => console.log(err));
        }

        button.addEventListener('click', getInfoFetch)

        <button id="button">Get quote</button>
        <div id="quote"></div>








        let button = document.querySelector('#button')
        let quote = document.querySelector('#quote')

        function getInfoFetch(){

        fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
        .then(response => response.json())
        .then((data) => {

        // Access first item of data "array" to retrieve and display quote
        quote.innerText = data[0].quote;

        })
        .catch(err => console.log(err));
        }

        button.addEventListener('click', getInfoFetch)

        <button id="button">Get quote</button>
        <div id="quote"></div>





        let button = document.querySelector('#button')
        let quote = document.querySelector('#quote')

        function getInfoFetch(){

        fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
        .then(response => response.json())
        .then((data) => {

        // Access first item of data "array" to retrieve and display quote
        quote.innerText = data[0].quote;

        })
        .catch(err => console.log(err));
        }

        button.addEventListener('click', getInfoFetch)

        <button id="button">Get quote</button>
        <div id="quote"></div>






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Nov 8 at 9:26

























        answered Nov 8 at 3:08









        Dacre Denny

        8,9724729




        8,9724729






















            up vote
            0
            down vote













            Data which you are parsing is of Array type



            [{"quote":"I can't even say the word 'titmouse' without gigggling like a schoolgirl.","character":"Homer Simpson","image":"https://cdn.glitch.com/3c3ffadc-3406-4440-bb95-d40ec8fcde72%2FHomerSimpson.png?1497567511939","characterDirection":"Right"}]


            So to read that you need to pass index as well



            fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
            .then(response => response.json())
            .then((data) => {

            quote.innerText = data[0].quote;

            })
            .catch(err => console.log(err));


            Here is working fiddle






            share|improve this answer























            • Thanks! It is working now!
              – bsmith
              Nov 8 at 16:05















            up vote
            0
            down vote













            Data which you are parsing is of Array type



            [{"quote":"I can't even say the word 'titmouse' without gigggling like a schoolgirl.","character":"Homer Simpson","image":"https://cdn.glitch.com/3c3ffadc-3406-4440-bb95-d40ec8fcde72%2FHomerSimpson.png?1497567511939","characterDirection":"Right"}]


            So to read that you need to pass index as well



            fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
            .then(response => response.json())
            .then((data) => {

            quote.innerText = data[0].quote;

            })
            .catch(err => console.log(err));


            Here is working fiddle






            share|improve this answer























            • Thanks! It is working now!
              – bsmith
              Nov 8 at 16:05













            up vote
            0
            down vote










            up vote
            0
            down vote









            Data which you are parsing is of Array type



            [{"quote":"I can't even say the word 'titmouse' without gigggling like a schoolgirl.","character":"Homer Simpson","image":"https://cdn.glitch.com/3c3ffadc-3406-4440-bb95-d40ec8fcde72%2FHomerSimpson.png?1497567511939","characterDirection":"Right"}]


            So to read that you need to pass index as well



            fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
            .then(response => response.json())
            .then((data) => {

            quote.innerText = data[0].quote;

            })
            .catch(err => console.log(err));


            Here is working fiddle






            share|improve this answer














            Data which you are parsing is of Array type



            [{"quote":"I can't even say the word 'titmouse' without gigggling like a schoolgirl.","character":"Homer Simpson","image":"https://cdn.glitch.com/3c3ffadc-3406-4440-bb95-d40ec8fcde72%2FHomerSimpson.png?1497567511939","characterDirection":"Right"}]


            So to read that you need to pass index as well



            fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
            .then(response => response.json())
            .then((data) => {

            quote.innerText = data[0].quote;

            })
            .catch(err => console.log(err));


            Here is working fiddle







            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Nov 8 at 3:24

























            answered Nov 8 at 3:08









            MyTwoCents

            2,8211827




            2,8211827












            • Thanks! It is working now!
              – bsmith
              Nov 8 at 16:05


















            • Thanks! It is working now!
              – bsmith
              Nov 8 at 16:05
















            Thanks! It is working now!
            – bsmith
            Nov 8 at 16:05




            Thanks! It is working now!
            – bsmith
            Nov 8 at 16:05


















            draft saved

            draft discarded




















































            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.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53200964%2fwhy-am-i-getting-undefined-as-an-answer-when-fetching-data-from-an-api%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







            這個網誌中的熱門文章

            Xamarin.form Move up view when keyboard appear

            Post-Redirect-Get with Spring WebFlux and Thymeleaf

            Anylogic : not able to use stopDelay()