CODEWITHSUNDEEP
javascriptjsonember.jsember-dataopenweathermap
Chris Panella
Chris Panella

Reputation: 212

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

I am new to Ember app development and I am getting stuck on how I get the data displayed on a different page.

I believe in Ember terms... I have a main application, the only route I have currently is called "request-location". The "app/routes/request-location.js" has a Model() hook and there it calls to the Open Weather Map API (I tried working it into an adapter I just couldn't figure it out and since I got this response working I am posting about it).

I tried pushing the data to the store as you see from the commented out area (that was how another post showed it). The adapter I tried using was the JSONAPIAdapter but I also tried the RESTAdapter. I attempted following tutorials which used Normalizer's and Serializer's but I haven't had any luck.

I can read each piece of data in the responseJSON.name (or whatever else). I know my model only has the name currently I am just trying to get this to work first before I get the rest of the data. I just don't know how to get it to display in the request-location.hbs file. Below is my code. I appreciate all of your help in advance.

I assume I am not storing the object to the DS in Ember correctly if at all. I have tried to push it to the store via push, and pushPayload. Neither seemed to yield anything. I tried a comment below where I add the Ember.RSVP.Promise( Function(resolve) etc... but that gives me a list of 5 when there should only be 1 name and the list turns up blank. - Update

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

Upvotes: 0

Views: 232

Answers (1)

ykaragol
ykaragol

Reputation: 6221

just return the value from the hook:

// 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: code updated according to comments.

Upvotes: 1

Related Questions