Question

我的代码有一些问题。我正在使用开放天气API创建此应用程序。我可以轻松地在weather.js文件中获取值并移至UI。只有它的某些值会在控制台中以错误响应。遵循代码和错误。

文件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;
  }
}

文件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;
  }
}

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

控制台错误：

TypeError：无法读取未定义的属性“ 0”

在UI.paint（ui.js：16）

在app.js：15

如果我通过description属性在weather.js文件中进行console.log调用，它会正确回答我，但是当我在ui.js中调用时，会出现此错误。

这不仅与此属性有关，而且与其他属性一样，我尝试调用country属性并说未设置。怎么解决？有人可以帮我吗？

Answer 1

由于paint类没有Weather属性，因此您会将api调用的结果作为参数传递给weather方法：

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

还要确保您的api响应实际上有一个weather道具，它是一个数组。

Answer 2

遵循正确的代码：

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

尝试使用json

2 个答案: