ajax request ember passing through component

Question

i just wanna get value from json request in ember services from component. this is my code

forecast-weather.js (services)

import Ember from 'ember';  
    export default Ember.Service.extend({
      findWeatherCurrent:function (lat,lng) {
        return Ember.$.getJSON('https://api.darksky.net/forecast/22b106924ed7e3bcde76608f7f064585/'+ lat +','+lng+'?exclude=minutely,hourly,daily,flags&units=si');
      },
      findWeatherDaily:function (lat,lng) {
        return Ember.$.getJSON('https://api.darksky.net/forecast/22b106924ed7e3bcde76608f7f064585/'+ lat +','+lng+'?exclude=minutely,hourly,currently,flags&units=si');
      },
      findWeatherHourly:function (lat,lng) {
        return Ember.$.getJSON('https://api.darksky.net/forecast/22b106924ed7e3bcde76608f7f064585/'+ lat +','+lng+'?exclude=minutely,daily,currently,flags&units=si');
      }
    });

weather-display.js (component)

import Ember from 'ember';

export default Ember.Component.extend({
  forecastWeather:Ember.inject.service(),
  willRender(){
    let lat = this.get('lat');
    let lng = this.get('lng');
    this.get('forecastWeather').findWeatherCurrent(lat,lng).then(data => {
      this.set('currents', data);
      console.log(data);
    });
  }
});

jsonRespon

{

    "latitude": 37.8267,
    "longitude": -122.4233,
    "timezone": "America/Los_Angeles",
    "offset": -7,
    "currently": {
        "time": 1489488513,
        "summary": "Clear",
        "icon": "clear-night",
        "nearestStormDistance": 47,
        "nearestStormBearing": 87,
        "precipIntensity": 0,
        "precipProbability": 0,
        "temperature": 13.54,
        "apparentTemperature": 13.54,
        "dewPoint": 8.59,
        "humidity": 0.72,
        "windSpeed": 0.87,
        "windBearing": 46,
        "visibility": 12.46,
        "cloudCover": 0.08,
        "pressure": 1016.58,
        "ozone": 279.62
    }

}

weather-display.hbs

<p id="word_on_change" class="font_black font-white word">{{currents.currently.windSpeed}}</p>

i just wanna passing that windspeed value from json to hbs template, but it doesnt working. can anyone solve this :(

Answer 1

To handle the result of $.getJSON its important to know your jQuery version. One of the most important changes in jQuery 3 is that jQuery.Deferred is now Promises/A+ compatible.

Probably you are using a jQuery version pre 3.0, which means you have to transform the Deferred to a Promise which can be done with Ember.RSVP.resolve().

However this is not your problem!

your actual problem

First I've build a twiddle with your code. Consider doing this yourself next time ;-). There you see the error in the console:

XMLHttpRequest cannot load https://api.darksky.net/forecast/22b106924ed7e3bcde76608f7f064585/46.9483,7.4515?exclude=minutely,hourly,daily,flags&units=si. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

This is because darksky has disabled CORS for their API. This means you can't access the API from in-Browser JavaScript directly.

You have to request your own Webserver, which then can do the request to the darksky API.

Please check the references about CORS.

But the request returns a 200 OK in the dev tools or an HTTP debugger

Yes. This is how CORS works. The data is successfully returned to the Browser by the application, but because the CORS headers are missing the Browser doesnt allow your Website to access the response. This is a important security feature.