Json not working with angular.js

Question

I'm trying to get forecast information from an external domain, which doesn't seem to work yet. Both Angular and jQuery are loaded, but nothing shows up in HTML. Chrome doesn't report an error message either.

        var currentCityread = "Eindhoven";
        var api1 = 'http://api.openweathermap.org/data/2.5/forecast/daily?q='+currentCityread+'&cnt=10&mode=json&units=metric&APPID=000000000000000&callback=?';
        var api2 = 'http://api.openweathermap.org/data/2.5/weather?q='+currentCityread+'&mode=json&units=metric&APPID=000000000000000&callback=?'
        function ReadJson($scope) {
            $.ajax({
              dataType: "json",
              url: api1,
              }).done(function (output) {
                $scope.jsonTotal = output.list[0].temp.day+output.list[1].temp.day+output.list[2].temp.day+output.list[3].temp.day+output.list[4].temp.day+output.list[5].temp.day+output.list[6].temp.day+output.list[7].temp.day+output.list[8].temp.day+output.list[9].temp.day;
                $scope.jsonCalcu = Math.round($scope.jsonTotal / 10);
                $scope.jsonCurrent = Math.round(output.list[0].temp.day);
                $scope.jsonCurrent2 = Math.round(output.list[1].temp.day);
                $scope.jsonCurrenticon2 = output.list[1].weather[0].icon;
                $scope.jsonCurrent3 = Math.round(output.list[2].temp.day);
                $scope.jsonCurrenticon3 = output.list[2].weather[0].icon;
            });
            $.ajax({
              dataType: "json",
              url: api2,
              }).done(function (outputcurrent) {
                $scope.jsonCurrenticon = outputcurrent.weather[0].icon;
            });
        }

Try $scope.$apply() inside the done method callback, after the assignment — Chandermani
– Chandermani, Commented Aug 5, 2013 at 13:22
where is this code? is ReadJson a controller? otherwise I don't know how you can inject scope there. In any case, why not using $http ? — Eduard Gamonal
– Eduard Gamonal, Commented Aug 5, 2013 at 13:22
I don't think jquery ajax can work with angular's scope. use $http instead — zs2020
– zs2020, Commented Aug 5, 2013 at 13:25
This code is an external javascript file. ReadJson is a controller indeed. $http won't do the trick as that might be insecure, cross domain:). — amees_me
– amees_me, Commented Aug 5, 2013 at 13:25
It makes no sense. They are pretty much at the same secure level. The point is you can't use jQuery to access Angularjs scope like this. — zs2020
– zs2020, Commented Aug 5, 2013 at 13:45

Chandermani · Accepted Answer · 2013-08-05 14:41:37Z

1

Since you are updating the scope after a callback which is outside the angular execution context, you need to use $scope.$apply().

But as others have mentioned in their comments $http can be used, with JSONP as the request is cross domain.

answered Aug 5, 2013 at 14:41

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kakarukeys · Accepted Answer · 2013-08-05 13:47:41Z

0

I think same-origin policy forbids you from performing cross-domain query. What you can do is to perform the query on the server side, and return the result to the browser. Another workaround is to use jsonp. But it is not recommended due to its insecure nature.

answered Aug 5, 2013 at 13:47

kakarukeys

24.1k11 gold badges41 silver badges48 bronze badges

Collectives™ on Stack Overflow

Json not working with angular.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related