title: Ember Web App - Trouble displaying JSON data - Open Weather Map API
body: <p>I am new to Ember app development and I am getting stuck on how I get the data displayed on a different page. </p>
  
  <p>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).</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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 + '&amp;appid=' + key;
      console.log('url: ' + url);
      Ember.$.getJSON(url).then((responseJSON) =&gt; {
  
        console.log('name: ' + responseJSON.name);
  
        //this.store.pushPayload(responseJSON.name); //.results);
        return responseJSON.name;
      });
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>// 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
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- /templates/request-location.hbs --&gt;
  
  &lt;h2&gt;Request-location Weather Data&lt;/h2&gt;
  
  &lt;div class="container"&gt;
    &lt;ul&gt;
      {{#each model as |location|}}
        &lt;li&gt;{{location.name}}&lt;/li&gt;
      {{/each}}
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// /models/request-location.js
  
  import DS from 'ember-data';
  
  export default DS.Model.extend({
    name: DS.attr()
  });</code></pre>
  </div>
  </div>
  </p>