天气应用，openweathermap.org / api数据未加载

Question

 //FILE index.js const weather = new Weather ('weatherLocation.city') ; const ui = new UI(); const storage = new Storage(); const weatherLocation = storage.getLocationData(); document.addEventListener("DOMContetnLoaded", getWeather) document.getElementById('w-change-btn').addEventListener('click', (e)=>{ const city = document.getElementById('city').value; weather.changeLocation(city); storage.setLocationData(city); getWeather(); $('#locModal').modal('hide'); }) function getWeather() { weather.getWeather() .then(results => { ui.paint(results); }) .catch(err => console.log(err)); } //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.maxTemp = document.getElementById('w-maxtemp'); this.pressure = document.getElementById('w-pressure'); this.wind = document.getElementById('w-wind'); } paint(weather) { this.location.textContent = weather.name; this.desc.textContent = weather.weather[0].main; this.string.textContent = weather.main.temp + "℃"; this.icon.setAttribute('src', `http://openweathermap.org/img/w/${weather.weather[0].icon}.png`); this.humidity.textContent = `Relative Humidity: ${weather.main.humidity} %`; this.maxTemp.textContent = `Maximum Temperature: ${weather.main.temp_max} ℃`; this.pressure.textContent = `Pressure Level: ${weather.main.pressure}`; this.wind.textContent = `Wind Speed: ${weather.wind.speed} m/s`; } } //FILE weather.js class Weather { constructor(city){ this.apiKey = '871f423b3e84cd9f55df405c88cee62d'; this.city = city; } async getWeather(){ const response = await fetch (`https://api.openweathermap.org/data/2.5/weather?q=${this.city}&APPID=${this.apiKey}&units=metric`) const responseData = await response.json(); return responseData; } changeLocation(city){ this.city = city; } } //FILE storage.js class Storage{ constructor(){ this.city; this.defaultCity = "Prague" } getLocationData(){ if( localStorage.getItem('city') === null){ this.city = this.defaultCity; } else { this.city = localStorage.getItem('city'); } return { city:this.city }; } setLocationData(city, state){ localStorage.setItem('city', city); } }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://bootswatch.com/4/cerulean/bootstrap.min.css"> <title>Weather</title> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 mx-auto text-center bg-primary mt-5 p-5 rounded"> <h1 id="w-location"></h1> <h3 class="text-dark" id="w-desc"></h3> <h3 id="w-string"></h3> <img id="w-icon"> <ul id="w-details" class="list-group mt-3"> <li class="list-group-item " id="w-humidity"></li> <li class="list-group-item " id="w-dewpoint"></li> <li class="list-group-item " id="w-feels-like"></li> <li class="list-group-item " id="w-wind"></li> </ul> <hr> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#locModal"> Change Location </button> </div> </div> </div> <div class="modal fade" id="locModal" tabindex="-1" role="dialog" aria-labelledby="locModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="locModalLabel">Choose Location</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <form id="w-form"> <div class="form-group"> <label for="city"></label> <input type="text" id="city" class="form-control"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" id="w-change-btn">Save changes</button> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script src="storage.js"></script> <script src="weather.js"></script> <script src="index.js"></script> <script src="ui.js"></script> </body> </html>

我没有从openweathermap.org/api获取数据。 我从openweathermap.org/api获取api密钥和安全密钥。 没有数据显示。 我按照说明进行操作，并从中使用了api，但我的应用程序根本不加载数据。 知道什么地方可能出问题吗？ ！[天气应用]（ https://www.pinterest.com/pin/101682904073182759

该代码在我的github帐户上： https ： //github.com/nansol/WeatherApp

Answer 1

我只更改声明顺序（将所有类声明： UI, Storage, Weather移到顶部），它在这里在jsfiddle中起作用（但由于SecurityError而在SO代码段中不起作用），因此您需要在html底部更改脚本声明的序列归档到：

<script src="ui.js"></script>
<script src="weather.js"></script>
<script src="storage.js"></script>
<script src="index.js"></script>

天气应用，openweathermap.org / api数据未加载

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-01-21 08:12:37

天气应用，openweathermap.org / api数据未加载

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-01-21 08:12:37

解决方案1
0 已采纳 2019-01-21 08:12:37