CODEWITHSUNDEEP
javascriptangularjsjsonp
jacksonbaker
jacksonbaker

Reputation: 105

Using angularjs JSONP when callback cant be defined

I'm attempting to use Angularjs to gather data from the USGS Earthquake feed. Typically you would need to tack ?callback=JSON_CALLBACK on to the end of the URL for Angular to use it, however the USGS feed does not recognize this option.

The URL I'm using is http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojsonp and adding ?callback=JSON_CALLBACK (eg. http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojsonp?callback=JSON_CALLBACK) returns a dataset wrapped in a function called eqfeed_callback.

Is there any way to use this data? I've got an eqfeed_callback function but it's not in scope which makes using Angular pointless.

Here's the code that I've got as it stands: 

function QuakeCtrl($scope, $http) {

    $scope.get_quakes = function() {
        var url = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojsonp';
        $http.jsonp(url)
    }

}

function eqfeed_callback(data) {
    return data;
}

Is there any way to either get the data back into the scope, or get angular to use the eqfeed_callback function internally?

Upvotes: 8

Views: 6652

Answers (3)

Jacksonkr
Jacksonkr

Reputation: 32207

Expanding on @MichaelVanRijn's answer:

In order to keep the "global peace", define the global function when you need it and nullify it right after.

.controller('QuakeCtrl', function($window, $scope, $http) {
  $scope.get_quakes = function() {
    $window.eqfeed_callback = function(data){
      console.log("quake data", data)
    };

    // load your jsonp data
    $http.jsonp('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojsonp')
    .then(function(success) {
      console.log(success);
      $window.eqfeed_callback = null;
    }, function(fail) {
      console.log(fail);
      $window.eqfeed_callback = null;
    })
  }
})

Upvotes: 0

Manuel van Rijn
Manuel van Rijn

Reputation: 10305

Another option would be defining the eqfeed_callback within the scope like this:

function QuakeCtrl($scope, $http) {
    $scope.data = null;
    $scope.get_quakes = function() {
      var url = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojsonp';
      $http.jsonp(url)
    }

    window.eqfeed_callback = function(data) {
      $scope.data = data
    }
}

Upvotes: 18

T.J. Crowder
T.J. Crowder

Reputation: 1074335

The only idea that comes to mind is (blech) to use a global, and then to manually trigger an Angular update, e.g.:

var callback$scope;
function QuakeCtrl($scope, $http) {

    $scope.get_quakes = function() {
        var url = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojsonp';
        callback$scope = $scope;
        $http.jsonp(url)
    }

}

function eqfeed_callback(data) {
    if (callback$scope) {
        // 1. Use callback$scope here
        // 2. Set callback$scope to undefined or null
        // 3. Trigger an Angular update (since it won't be automatic)
    }
}

Not pretty, but...

Upvotes: 0

Related Questions