当我尝试使用json获取API返回值时出错

Question

I have some problems with my code. I am using the open weather API to create this application. I can easily get the values in the weather.js file and moving to UI. Only it has some values that responds with error in the console. Follows code and errors.

File weather.js

class Weather {
  constructor(city, state) {
    this.apiKey = "xxxxxxxxxxxx";
    this.city = city;
    this.state = state;
  }

  // Fetch weather from API
  async getWeather() {
    const response = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${this.city},${this.state}&APPID=${this.apiKey}`
    );

    const responseData = await response.json();

    return responseData;
  }

  // Change weather location
  changeLocation(city) {
    this.city = city;
    this.state = state;
  }
}

File ui.js

class UI {
  constructor() {
    this.location = document.getElementById("w-location");
    this.desc = document.getElementById("w-desc");
    this.string = document.getElementById("w-string");
    this.details = document.getElementById("w-details");
    this.icon = document.getElementById("w-icon");
    this.humidity = document.getElementById("w-humidity");
    this.feelsLike = document.getElementById("w-feels-like");
    this.dewpoint = document.getElementById("w-dewpoint");
    this.wind = document.getElementById("w-wind");
  }

  paint() {
    this.location.textContent = weather.name;
    this.desc.textContent = weather.weather[0].description;
  }
}

File app.js

// Init Weather Class
const weather = new Weather("rio de janeiro");

const ui = new UI();

// Get weather on DOM load
document.addEventListener("DOMContentLoaded", getWeather);

//weather.changeLocation("los angeles");

function getWeather() {
  weather
    .getWeather()
    .then(results => {
      ui.paint();
    })
    .catch(err => console.log(err));
}

Console Error:

TypeError: Cannot read property '0' of undefined

at UI.paint (ui.js:16)

at app.js:15

In case if I make a console.log call in the weather.js file by the description property, it answers me correctly, but when I call in ui.js it gives this error.

And this is not just with this property, but with others as well, I tried to call the country property and says it is not set. How to solve? Can someone help me?

Answer 1

You'd pass the results of the api call as a param to the paint method, since the Weather class doesn't have a weather property:

  paint(data) {
    this.location.textContent = data.name;
    this.desc.textContent = data.weather[0].description;
  }


function getWeather() {
  weather
    .getWeather()
    .then(results => {
      ui.paint(results);
    })
    .catch(err => console.log(err));
}

Also make sure your api response actually has a weather prop, which is an array.

Answer 2

Follows corrected code:

app.js

// Init Weather Class
const weather = new Weather("rio de janeiro");

const ui = new UI();

// Get weather on DOM load
document.addEventListener("DOMContentLoaded", getWeather);

//weather.changeLocation("los angeles");

function getWeather() {
  weather
    .getWeather()
    .then(results => {
      ui.paint(results);
    })
    .catch(err => console.log(err));
}

weather.js

class Weather {
  constructor(city, state) {
    this.apiKey = "17df2a26f3c8c6032f3eacdbbf3a8e25";
    this.city = city;
    this.state = state;
  }

  // Fetch weather from API
  async getWeather() {
    const response = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${this.city},${this.state}&APPID=${this.apiKey}`
    );

    const responseData = await response.json();

    console.log(responseData);

    return responseData;
  }

  // Change weather location
  changeLocation(city) {
    this.city = city;
    this.state = state;
  }
}

ui.js

class UI {
  constructor() {
    this.location = document.getElementById("w-location");
    this.desc = document.getElementById("w-desc");
    this.string = document.getElementById("w-string");
    this.details = document.getElementById("w-details");
    this.icon = document.getElementById("w-icon");
    this.humidity = document.getElementById("w-humidity");
    this.feelsLike = document.getElementById("w-feels-like");
    this.dewpoint = document.getElementById("w-dewpoint");
    this.wind = document.getElementById("w-wind");
  }

  paint(weather) {
    this.location.textContent = weather.name;
    this.desc.textContent = weather.weather[0].description;
  }
}