Ember Web 应用程序 - 无法显示 JSON 数据 - 打开天气图 API

Question

我是 Ember 应用程序开发的新手，我对如何在不同的页面上显示数据感到困惑。

我相信 Ember 条款...我有一个主要应用程序，我目前唯一的路线叫做 "request-location"。 "app/routes/request-location.js" 有一个 Model() 挂钩，它在那里调用开放天气图 API（我尝试将它放入一个适配器中，但我无法弄清楚，因为我得到了这个响应，我我 post 正在考虑它）。

我尝试将数据推送到商店，正如您从注释掉的区域看到的那样（这是另一个 post 显示的方式）。我尝试使用的适配器是 JSONAPIAdapter，但我也尝试了 RESTAdapter。我尝试遵循使用 Normalizer 和 Serializer 的教程，但我没有任何运气。

我可以读取 responseJSON.name（或其他任何内容）中的每条数据。我知道我的模型目前只有名称，我只是想在获取其余数据之前先让它工作。我只是不知道如何让它显示在 request-location.hbs 文件中。下面是我的代码。感谢您提前提供的所有帮助。

我假设我没有将对象正确存储到 Ember 中的 DS（如果有的话）。我试图通过推送和 pushPayload 将它推送到商店。两者似乎都没有产生任何结果。我尝试在下面添加 Ember.RSVP.Promise( Function(resolve) 等的评论......但是当只有 1 个名称并且列表变成空白时，这给了我一个 5 的列表。 - 更新

// routes/request-location.js

import Ember from 'ember';
import config from '../config/environment';

export default Ember.Route.extend({
  model() {
    var key = config.myApiKey;
    var location = "denver";
    var url = 'http://api.openweathermap.org/data/2.5/weather?q=' + location + '&appid=' + key;
    console.log('url: ' + url);
    Ember.$.getJSON(url).then((responseJSON) => {

      console.log('name: ' + responseJSON.name);

      //this.store.pushPayload(responseJSON.name); //.results);
      return responseJSON.name;
    });
  }
});

// Returned JSON Object

{
    "coord": {
        "lon": -0.13,
        "lat": 51.51
    },
    "weather": [{
        "id": 701,
        "main": "Mist",
        "description": "mist",
        "icon": "50d"
    }, {
        "id": 741,
        "main": "Fog",
        "description": "fog",
        "icon": "50d"
    }],
    "base": "stations",
    "main": {
        "temp": 279.4,
        "pressure": 1011,
        "humidity": 93,
        "temp_min": 278.15,
        "temp_max": 280.15
    },
    "visibility": 8000,
    "wind": {
        "speed": 2.6,
        "deg": 30
    },
    "clouds": {
        "all": 90
    },
    "dt": 1485766200,
    "sys": {
        "type": 1,
        "id": 5091,
        "message": 0.191,
        "country": "GB",
        "sunrise": 1485762062,
        "sunset": 1485794844
    },
    "id": 2643743,
    "name": "London",
    "cod": 200
}

<!-- /templates/request-location.hbs -->

<h2>Request-location Weather Data</h2>

<div class="container">
  <ul>
    {{#each model as |location|}}
      <li>{{location.name}}</li>
    {{/each}}
  </ul>
</div>

// /models/request-location.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr()
});

Answer 1

只是 return 来自钩子的值：

// routes/request-location.js

import Ember from 'ember';
import config from '../config/environment';

export default Ember.Route.extend({
  model() {
    var key = config.myApiKey;
    var location = "denver";
    var url = 'http://api.openweathermap.org/data/2.5/weather?q=' + location + '&appid=' + key;
    return new Ember.RSVP.Promise(function(resolve){
       Ember.$.getJSON(url).then((responseJSON) => {
          resolve([responseJSON]);
       });
    });
  }
});

ps: 根据评论更新代码。

Ember Web 应用程序 - 无法显示 JSON 数据 - 打开天气图 API

Ember Web App - Trouble displaying JSON data - Open Weather Map API

javascript

json

ember.js

ember-data

openweathermap