CODEWITHSUNDEEP
javascriptjqueryjsonangularjsjsonp
Michal
Michal

Reputation: 183

Angular. How to chenge json response to jsonp response?

I using openweathermap api to get json data, bu i need to get and use jsonp data for it, how to do this in my angular service ?

app.factory('forecast', ['$http', function($http) { 
  this.sendAPIRequest = function(city){
      return $http.get('http://api.openweathermap.org/data/2.5/forecast/city?q='+city+'&units=metric&mo') 
      .success(function(data) { 
          return data; 
      }) 
      .error(function(err) { 
          return err; 
      }); 
  },

Upvotes: 0

Views: 150

Answers (1)

AlphaG33k
AlphaG33k

Reputation: 1678

https://docs.angularjs.org/api/ng/service/$http#jsonp Demonstrates the proper way to use angular to receive JSONP objects.

The $http service call (from the AngularDocs) would look like:

$http({method: 'JSONP', url: $scope.url, cache: $templateCache})
    .success(function(data, status) {
        $scope.status = status;
        $scope.data = data;
    })...

While the markup binding this functionality is:

<div ng-controller="FetchController">
  <select ng-model="method" aria-label="Request method">
    <option>GET</option>
    <option>JSONP</option>
  </select>
  <input type="text" ng-model="url" size="80" aria-label="URL" />
  <button id="fetchbtn" ng-click="fetch()">fetch</button><br>
  <button id="samplegetbtn" ng-click="updateModel('GET', 'http-hello.html')">Sample GET</button>
  <button id="samplejsonpbtn"
    ng-click="updateModel('JSONP',
                  'https://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super%20Hero')">
    Sample JSONP
  </button>
  <button id="invalidjsonpbtn"
    ng-click="updateModel('JSONP', 'https://angularjs.org/doesntexist&callback=JSON_CALLBACK')">
      Invalid JSONP
    </button>
  <pre>http status code: {{status}}</pre>
  <pre>http response data: {{data}}</pre>
</div>

So basically your end result would be:

app.factory('forecast', ['$http', function($http) { 
  this.sendAPIRequest = function(city){
       return $http.jsonp('http://api.openweathermap.org/data/2.5/forecast/city?q='+city+'&units=metric&mo') 
       .success(function(data) { 
           return data; 
       }) 
       .error(function(err) { 
           return err; 
       }); 
   },

As seen here: parsing JSONP $http.jsonp() response in angular.js

Upvotes: 1

Related Questions