Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angularJS: http request configuration url must be a string

I have a function that takes an input from the front-end, and then concatinates that input into an URL that I want to get from wikipedia. Since I had problems with CORS, I implemented my $http.get as JSONP, and now I get the following error:

angular.js:13236 Error: [$http:badreq] Http request configuration url must be a string. Received: {"method":"JSONP","url":"https://en.wikipedia.org/w/api.php?action=query&format=json&uselang=user&prop=extracts%7Cpageimages&titles=Maya+Angelou&piprop=name%7Coriginal"}

The thing is, that his error shows the concatinated url as a string?

Can anybody point out what I'm doing wrong?

This is the function I am calling:

//function to get author info from wikipedia
$scope.getAuthorInfo = function(author) {
    //remove whitespace from author
    author = author.replace(/\s/g, '+');
    //concat the get URL
    var url = 'https://en.wikipedia.org/w/api.php?action=query&format=json&uselang=user&prop=extracts%7Cpageimages&titles=' +
        author + '&piprop=name%7Coriginal';
    //get author info from wikipedia    
    $http.get({
            method: 'JSONP',
            url: url
        })
        .then(function successCallback(response) {
            $scope.author = response.data;
            //for every result from wikipedia, trust the extract as html
            for (var x in $scope.author.query.pages) {
                $scope.author.query.pages[x].extract = $sce.trustAsHtml($scope.author.query.pages[x].extract);
            }

        }, function errorCallback(response) {
            console.log(response);
        });
};

If you need additional information, please let me know.

like image 310
Miha Šušteršič Avatar asked Mar 16 '16 09:03

Miha Šušteršič


People also ask

What is $HTTP in AngularJS?

The $http service is a core AngularJS service that facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP. For unit testing applications that use $http service, see $httpBackend mock.

Which of these options is correct for setting header in AngularJS http POST request?

Answer: C is the correct option. The ng-bind directive is used to bind the application data to the HTML view in the AngularJS application.

What is HTTP request in angular?

HttpRequest represents an outgoing request, including URL, method, headers, body, and other request configuration options. Instances should be assumed to be immutable. To modify a HttpRequest , the clone method should be used.

How do we pass data and get data using http in angular?

Use the HttpClient.get() method to fetch data from a server. The asynchronous method sends an HTTP request, and returns an Observable that emits the requested data when the response is received. The return type varies based on the observe and responseType values that you pass to the call.


1 Answers

$http({
  method: 'JSONP',
  url: url
}).then(function successCallback(response) {
  // ok
}, function errorCallback(response) {
  // ko
});

$http.get is a shortcut method for $http({ method: 'GET' }), and expects the URL as the first parameter.

As you're using JSONP, you could also use the $http.jsonp shortcut:

$http.jsonp(url).then(function successCallback(response) {
  // ok
}, function errorCallback(response) {
  // ko
});
like image 186
sp00m Avatar answered Oct 19 '22 02:10

sp00m