Employing angularjs alongside a static jsonp file produces results on the first attempt

Question

Employing angularjs alongside a static jsonp file produces results on the first attempt

Currently, I have data being retrieved from a jsonp file within my application.

worm.factory('simpleFactory', function ($http, gf) {
var simpleFactory = "";
return {
    getJson: function ($scope) {
        var url = 'myfile.json?callback=JSON_CALLBACK';
        $http.jsonp(url).success(function (data) {
                console.log("Received data:", data);
        }).error(function (data, status, headers, config) {
                console.log("Data is not accessible");
            });

    }
}
});

This functionality works perfectly on the page on its own. However, if the same request is made again within the app or if the app is duplicated elsewhere on the page (to display different parts of a graph with the same data), an error occurs.

Since the json file is static, how can I resolve this issue? Is there a way to run the same app on the same page but keep them isolated from each other?

javascript service angularjs jsonp factory

Answer 1

Answer №1

If you are not initializing GF, make sure to remove it from the top. The proper way to do this is:

worm.factory('simpleFactory', function ($http) {
return {
    getJson: function (callback) {
        var url = 'myfile.json?callback=JSON_CALLBACK';
        $http.jsonp(url).success(function (data) {
                callback(data);
        });

    }
}
});

Make sure to send the callback to the function so that your controller can receive it. Although I haven't used $http.jsonp before, using $http would look like this:

worm.factory('simpleFactory', function ($http) {
return {
    getJson: function (callback) {
        var url = 'myfile.json?callback=JSON_CALLBACK';
        $http({method: 'jsonp', url: 'myfile.json?callback=JSON_CALLBACK'}).success(function (data) {
                callback(data);
        });

    }
}
});

It would be helpful if you could also share your controller and view to ensure everything is being done correctly.

Hope this information helps!

Answer 2

If you are not initializing GF, make sure to remove it from the top. The proper way to do this is:

worm.factory('simpleFactory', function ($http) {
return {
    getJson: function (callback) {
        var url = 'myfile.json?callback=JSON_CALLBACK';
        $http.jsonp(url).success(function (data) {
                callback(data);
        });

    }
}
});

Make sure to send the callback to the function so that your controller can receive it. Although I haven't used $http.jsonp before, using $http would look like this:

worm.factory('simpleFactory', function ($http) {
return {
    getJson: function (callback) {
        var url = 'myfile.json?callback=JSON_CALLBACK';
        $http({method: 'jsonp', url: 'myfile.json?callback=JSON_CALLBACK'}).success(function (data) {
                callback(data);
        });

    }
}
});

It would be helpful if you could also share your controller and view to ensure everything is being done correctly.

Hope this information helps!

Employing angularjs alongside a static jsonp file produces results on the first attempt

Answer №1

Similar questions

Learning how to toggle default snippet keywords on and off based on specific scenarios within the Angular Ace Editor

Switch up the background image within the directive

Do you find this unattractive? What are some ways to improve this unsightly JavaScript statement?

Can a website built on Express.js be optimized for SEO?

What is the best way to trigger a function once all asynchronous calls within a loop have been completed?

Is it possible to make a form field inactive based on another input?

Utilize AngularJS's nested ng-repeat to showcase information from two distinct JSON strings simultaneously

Modify the JSON structure of a deeply nested object

implement django self,pk post-save success function

Framework for developing websites with search engine optimization in mind, powered by

Identify when objects in kineticJS are dropped

What is the command line method for running ESLint in flat configuration?

Lacking the knowledge on establishing range for amCharts

AngularJS - Creating a date input with ng-model that stores the date in milliseconds

Adding a delay to your JQuery wiggle effect

What is the best way to incorporate a custom string into an Angular application URL without disrupting its regular operation?

Challenges when using deep linking to URL with AngularJS ui-router

Delay in only a portion of the AJAX response

Display and conceal multiple div elements using a timer

Retrieving the Selector Value during a Change Event