CODEWITHSUNDEEP
javascriptfetch-api
Rob
Rob

Reputation: 31

Trying to get data from an API using fetch

Using fetch() and the Ticketmaster API I'm trying to access [[PromiseValue]] in the log, but keep getting undefined.

const API_key = '1234'

fetch(`https://app.ticketmaster.com/discovery/v2/events.json?size=1&apikey=${API_key}`)
      .then(response => console.log(response.json()))
      .then(data => console.log(data))

Upvotes: 0

Views: 349

Answers (1)

peinearydevelopment
peinearydevelopment

Reputation: 11474

.then(response => console.log(response.json())) is returning undefined as the console.log method doesn't return any value;

Update your code to use the actual value:

Option 1:

fetch(https://app.ticketmaster.com/discovery/v2/events.json?size=1&apikey=${API_key})
  .then(response => {
      var response = response.json();
      console.log(response);
      return response;
  })
  .then(data => console.log(data))

Option 2:

fetch(https://app.ticketmaster.com/discovery/v2/events.json?size=1&apikey=${API_key})
  .then(response => response.json())
  .then(data => console.log(data))

If you further wanted to utilize the data returned from the API, you have to understand what the shape of the data is and define what you want to do with it. Looking at their docs quickly, if you want to get the name of the first event returned in your query, you could replace .then(data => console.log(data)) with

.then(data => console.log(data._embedded.events[0].name)) // logs it to the console

OR

.then(data => alert(data._embedded.events[0].name)) // creates an alert with the name in it

OR

.then(data => {
  var ele = document.createElement('div');
  ele.innerHTML = data._embedded.events[0].name;
  document.querySelector('body').appendChild(ele);
}); // creates a div with the name in it and appends it to your page

Upvotes: 1

Related Questions