Why am I getting undefined on my console?

Question

I am trying to make an AJAX call using fetch and promises. I want to display the city in the console. I was able to display the temperatures but for some reason the location is showing up as undefined. Please advise. Below is my code:

function getWeather(woeid) {
  // You wanna pass in the API URL into the fetch method as a string
  // Moesif Orign & CORS chrome extension is used to fetch this API since we are practicing locally
  fetch(`https://www.metaweather.com/api/location/${woeid}/`) // Automatically returns a promise
    .then(result => { // The fetch AJAX request will be called result
      console.log(result);
      return result.json(); // This will process the data (body:ReadableSteam). Returns a promise 
    })
    .then(data => {
      //console.log(data);
      const today = data.consolidated_weather[0];
      console.log(`Todays temperatures in ${today.title} will stay between ${today.min_temp} and ${today.max_temp}.`);
    })
    .catch(error => console.log(error));
}

getWeather(2487956);
getWeather(44418);

Hello! Sorry for not being clear. I am getting undefined at {today.title} — Quang P., Aug 01 '20 at 01:55
Actually, executing the above content, it just returns `{}`. The server connection is failing. The AJAX call is failing. — Praveen Kumar Purushothaman, Aug 01 '20 at 01:55
The object `data.consolidated_weather[0]` doesn't have the `title` property, that's in one of the objects in the `data.sources` array — Nick Parsons, Aug 01 '20 at 01:57
Thanks Nick! Just want to clarify, I am using a chrome extension called Moesif CORS which allows me to make AJAX calls locally. Thanks all!!! — Quang P., Aug 01 '20 at 02:00

score 2 · Accepted Answer · answered Aug 01 '20 at 02:01

As Nick says, it looks like you need the right data option. So this code actually fixes it:

const todaySrc = data.sources[0];
todaySrc.title // BBC

Here's a Full Snippet:

function getWeather(woeid) {
  // You wanna pass in the API URL into the fetch method as a string
  // Moesif Orign & CORS chrome extension is used to fetch this API since we are practicing locally
  fetch(`https://www.metaweather.com/api/location/${woeid}/`) // Automatically returns a promise
    .then(result => { // The fetch AJAX request will be called result
      console.log(result);
      return result.json(); // This will process the data (body:ReadableSteam). Returns a promise 
    })
    .then(data => {
      //console.log(data);
      const today = data.consolidated_weather[0];
      const todaySrc = data.sources[0];
      console.log(`Todays temperatures in ${todaySrc.title} will stay between ${today.min_temp} and ${today.max_temp}.`);
    })
    .catch(error => console.log(error));
}

getWeather(2487956);
getWeather(44418);

Why am I getting undefined on my console?

1 Answers1