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 :(
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!
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.
200 OK
in the dev tools or an HTTP debuggerYes. 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.