How can I get api data from the website, it shows me TypeError message

Question

function getInfo() {
  fetch("https://swapi.co/api/people")
    .then(response => response.json())
    .then(function(data) {
      console.log(data);

    })
    .catch(function(error) {
      // If there is any error you will catch them here
      console.log(error);
    });
}

const newPerson = document.getElementById('newQuote')
newPerson.addEventListener('click', getInfo); // new quote on button click
window.onload = getInfo; // new quote on page load

I wrote this code and in console I got the following message: TypeError{}

I can't reproduce the problem. What is the full error message? What line triggers the error? — Quentin, Apr 01 '20 at 13:49
Best guess is a duplicate of https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — Quentin, Apr 01 '20 at 13:49
The code doesnt reproduce the problem but it doesnt show in the console what I am expecting. I need to take data api form the file and instead of it I just receive TypeError{} message. Maybe my approach of solving this task is incorrect. I am newbie in this field. — dev2021, Apr 01 '20 at 13:52
Add ```async``` keyword before function. So, async ensures that the function returns a promise, and wraps non-promises in it. — Sadaf Niknam, Apr 01 '20 at 13:52
@SadafNiknam — There's no point in doing that. There's no attempt to `await` anything or do anything with the return value (which is an event handler so nothing *can* be done with it) — Quentin, Apr 01 '20 at 13:54
Can you please share complete error trace. Your API call is perfectly fine — Zain Ul Abideen, Apr 01 '20 at 13:55
You code looks fine to me. Try once with dummy API. 'https://jsonplaceholder.typicode.com/todos/1'. — Devang, Apr 01 '20 at 13:57
@Devang I changed the link on ('https://jsonplaceholder.typicode.com/todos/1') and I see that I can get the data! Thank you for help!!! — dev2021, Apr 01 '20 at 14:07

score 1 · Accepted Answer · answered Apr 01 '20 at 14:09

You should not use the async function as an event listener's function. What you should do is call the async function inside the listener's function.

function getInfo() {
  fetch("https://swapi.co/api/people")
    .then(response => response.json())
    .then(function(data) {
      console.log(data);

    })
    .catch(function(error) {
      // If there is any error you will catch them here
      console.log(error);
    });
}



const newPerson = document.getElementById('newQuote');

newPerson.addEventListener('click', function(e) {
    e.preventDefault();
    getInfo();
});

window.addEventListener('load', function(e) {
    getInfo();
});

<button id="newQuote">New Quote</button>

How can I get api data from the website, it shows me TypeError message

1 Answers1