Configuration of HTTP JSONP variable in Angular

Question

Configuration of HTTP JSONP variable in Angular

I have successfully implemented http.jsonp for making cross-domain calls. Here is the configuration object I am using:

 var config = {
            params: {
                action: "query",
                prop: "revisions",
                format: "json",
                rvlimit: 50,
                titles: 'obama',//works
               // titles: val, //doesn't works
                callback: "JSON_CALLBACK"    
            }           
        };

        var url = "http://en.wikipedia.org/w/api.php?";

        $http.jsonp(url, config).success(function(data) {
            var pages = data.query.pages;

            for (var pageid in pages)
            {        
                $scope.revisions = pages[pageid].revisions;
                break; // expect only one page
            }

            $scope.loaded = true;
        });

While everything functions correctly with a static value of 'obama' for 'titles,' I am facing an issue when I try to dynamically set the value through an input box. I have created a jsfiddle reproducing the issue:

Any suggestions on how to resolve this?

http://jsfiddle.net/L4qZZ/

javascript angularjs angularjs-scope

Answer 1

Answer №1

Once the user presses the "Submit" button, you will need to retrieve the information.

The issue with your current code is that you are using val to assign the title rather than $scope.val.

Make the necessary adjustments to your code so that the HTTP request is triggered when the user clicks the button, resulting in the successful retrieval of your data.

For a visual representation of the solution, you can visit this Fiddle.

Simply input "obama" into the text field and press the button to access your desired data.

Answer 2

Once the user presses the "Submit" button, you will need to retrieve the information.

The issue with your current code is that you are using val to assign the title rather than $scope.val.

Make the necessary adjustments to your code so that the HTTP request is triggered when the user clicks the button, resulting in the successful retrieval of your data.

For a visual representation of the solution, you can visit this Fiddle.

Simply input "obama" into the text field and press the button to access your desired data.

Answer 3

Answer №2

because $scope is not being used to retrieve the ng-model values, it is recommended to use $scope.val instead of just val

Give it a try

var settings = {
    params: {
        action: "query",
        prop: "revisions",
        format: "json",
        rvlimit: 50,
        titles: $scope.val,
        callback: "JSON_CALLBACK"    
    }           
};

Answer 4

because $scope is not being used to retrieve the ng-model values, it is recommended to use $scope.val instead of just val

Give it a try

var settings = {
    params: {
        action: "query",
        prop: "revisions",
        format: "json",
        rvlimit: 50,
        titles: $scope.val,
        callback: "JSON_CALLBACK"    
    }           
};

Answer 5

Answer №3

A suggestion for improving your code structure is to transfer the data loading functionality to a service. Consider the following example:

app.factory('Wiki', function ($q, $http) {
    return {
        loadData: function (title) {

            var deferred = $q.defer(),
            config = {
                params: {
                    action: "query",
                    prop: "revisions",
                    format: "json",
                    rvlimit: 50,
                    titles: title,
                    callback: "JSON_CALLBACK"
                }
            },
            url = "http://en.wikipedia.org/w/api.php?";

            $http.jsonp(url, config).success(function(data) {
                var pages = data.query.pages;
                for (var pageid in pages) {
                    deferred.resolve(pages[pageid].revisions);
                    break;
                }
            });

            return deferred.promise;
        }
    };
});

You can then utilize this service in your controller like so:

app.controller('HistoryController', function($scope, Wiki) {
    $scope.loaded = false;
    $scope.getData = function(val) {
        Wiki.loadData(val).then(function(data) {
            $scope.loaded = true;
            $scope.revisions = data;
        });
    }
    $scope.getData('obama');
});

By utilizing services, your code becomes more adaptable and manageable, especially when handling data-related tasks.

Check out the demo: http://jsfiddle.net/L4qZZ/1/

Answer 6

A suggestion for improving your code structure is to transfer the data loading functionality to a service. Consider the following example:

app.factory('Wiki', function ($q, $http) {
    return {
        loadData: function (title) {

            var deferred = $q.defer(),
            config = {
                params: {
                    action: "query",
                    prop: "revisions",
                    format: "json",
                    rvlimit: 50,
                    titles: title,
                    callback: "JSON_CALLBACK"
                }
            },
            url = "http://en.wikipedia.org/w/api.php?";

            $http.jsonp(url, config).success(function(data) {
                var pages = data.query.pages;
                for (var pageid in pages) {
                    deferred.resolve(pages[pageid].revisions);
                    break;
                }
            });

            return deferred.promise;
        }
    };
});

You can then utilize this service in your controller like so:

app.controller('HistoryController', function($scope, Wiki) {
    $scope.loaded = false;
    $scope.getData = function(val) {
        Wiki.loadData(val).then(function(data) {
            $scope.loaded = true;
            $scope.revisions = data;
        });
    }
    $scope.getData('obama');
});

By utilizing services, your code becomes more adaptable and manageable, especially when handling data-related tasks.

Configuration of HTTP JSONP variable in Angular

Answer №1

Answer №2

Answer №3

Check out the demo: http://jsfiddle.net/L4qZZ/1/

Similar questions

What is the best way to iterate through an ID using jQuery?

Update Json information within VueJsonCSV and VueJS component

Unexpected issue: Angular view is failing to display jade templates

Incorporating a remote PHP file into your website using JavaScript

Utilizing styled-components or personalized components alongside cypress

Console displays null as the attribute value

Arrange jQuery UI elements in descending order

A step-by-step guide to summing two numbers within a list using vue.js

Using Puppeteer and Scrapy, this innovative Web Crawler with Scraper combines the power of both

What could be causing redux.props.reducer to return undefined?

Exploring the use of @HostListener in Angular for handling drop events

Issues with Rock Paper Scissors Array in Discord.js V12 not functioning as expected

Looking for Efficiency in Basic JavaScript Arithmetic Operations

Tips for configuring jQtree to initially display the tree structure from the HTML source

Definition of a Typescript Global.d.ts module for a function that is nested within another function

Utilizing streams for file input and output operations in programming

XPages component retrieval function is malfunctioning

Is there a way for me to manually designate certain domains with the rel="follow" attribute while assigning all other external links with the rel="nofollow" attribute?

Error message: Unable to load image from local source in Vue application

Error message in Angular when promises are not defined