When you encounter a situation where defining a callback is not feasible while using AngularJS JSON

Question

When you encounter a situation where defining a callback is not feasible while using AngularJS JSON

My goal is to utilize Angularjs for retrieving data from the USGS Earthquake feed. Unlike other APIs where adding ?callback=JSON_CALLBACK at the end of the URL allows Angular to process the data, the USGS feed does not support this option.

The URL I'm currently using is . When attempting to add ?callback=JSON_CALLBACK (e.g. ), it returns a dataset wrapped in a function called eqfeed_callback.

I am facing challenges in using this data effectively. Even though I have an eqfeed_callback function, it is not within scope which renders Angular's functionality ineffective.

Below is the current code snippet I am working with:

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;
}

I am looking for ways to either bring the data back into scope or enable Angular to internally use the eqfeed_callback function.

javascript angularjs jsonp

Answer 1

Answer №1

One alternative approach involves specifying the eqfeed_callback directly within the function's scope, as demonstrated below:

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

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

Answer 2

One alternative approach involves specifying the eqfeed_callback directly within the function's scope, as demonstrated below:

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

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

Answer 3

Answer №2

The best approach that comes to mind is to utilize a global variable and then manually prompt an Angular update, for instance:

var callbackScope;
function EarthquakeCtrl($scope, $http) {

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

}

function earthquakeDataCallback(data) {
    if (callbackScope) {
        // 1. Utilize callbackScope here
        // 2. Reset callbackScope to undefined or null
        // 3. Manually trigger an Angular update (as it won't happen automatically)
    }
}

It may not be the most elegant solution, but...

Answer 4

The best approach that comes to mind is to utilize a global variable and then manually prompt an Angular update, for instance:

var callbackScope;
function EarthquakeCtrl($scope, $http) {

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

}

function earthquakeDataCallback(data) {
    if (callbackScope) {
        // 1. Utilize callbackScope here
        // 2. Reset callbackScope to undefined or null
        // 3. Manually trigger an Angular update (as it won't happen automatically)
    }
}

It may not be the most elegant solution, but...

Answer 5

Answer №3

Building upon the response from @MichaelVanRijn:

To maintain "worldwide peace", establish the global function only when necessary and then cancel it out immediately afterwards.

.controller('EarthquakeControl', function($window, $scope, $http) {
  $scope.obtain_earthquakes = function() {
    $window.eqfeed_callback = function(data){
      console.log("seismic activity data", data)
    };

    // fetch 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;
    })
  }
})

Answer 6

Building upon the response from @MichaelVanRijn:

To maintain "worldwide peace", establish the global function only when necessary and then cancel it out immediately afterwards.

.controller('EarthquakeControl', function($window, $scope, $http) {
  $scope.obtain_earthquakes = function() {
    $window.eqfeed_callback = function(data){
      console.log("seismic activity data", data)
    };

    // fetch 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;
    })
  }
})

When you encounter a situation where defining a callback is not feasible while using AngularJS JSON

Answer №1

Answer №2

Answer №3

Similar questions

Choose from the options provided to display the table on the screen

Encountering an error when attempting to parse a JSON Object in Java from an AJAX call

What is the root cause behind the recurring appearance of this line in Angular/D3.js?

Navigating Pre-Fetched Client Routes in Gatsby with @ReachRouter

Tips for Creating a CSS Radio Button in ASP.NET

What is the best way to share an HTML element across multiple pages in Next.js?

Is it possible to include both a search value and a hash in a URL?

Web API security concern arises in the spa app. Is it possible for a user who is logged in with a JWT to send arbitrary requests to the API

Failed to verify the myCon module on the localhost server due to an Internal Server Error with a status code of 500

Experiencing difficulties posting on route due to receiving an undefined object instead of the expected callback in Node Js

Accessing $index in Vue.js computed properties

Combining AngularJS with JWT and either WCF or WebAPI creates a powerful and

Dealing with network issues when submitting a form

What methods can be used to prevent the appearance of the ActiveX warning in IE7 and IE8 when dealing with drop

Customize Popover Color in SelectField Component

Error message: Attempting to access the 'load' property of a null value

Updating an array object property in state using Redux

Is there a more efficient method for generating dynamic variable names from an array aside from using eval or document?

Optimal method for bundling web assets using Node.js modules in a comprehensive PHP/JavaScript web application

The specified path does not contain any of these files