CODEWITHSUNDEEP
javascriptjqueryangularjs
Mike
Mike

Reputation: 3418

AngularJs updating the URL for $http method dynamically

So I am trying to make an infinite scroll in Angular. The data items I want to show on my page are being served by a third party API and the URL looks like:

http://example.com/item/data/?param=item&pagesize=100&page=1

Now I am making a success ajax call using $http to the server and I have created a directive that on scroll will load the more Items from the url. But I can't get to update the URL, as soon as I start scrolling I would want my URL to become like:

http://example.com/item/data/?param=item&pagesize=100&page=1
http://example.com/item/data/?param=item&pagesize=100&page=2
http://example.com/item/data/?param=item&pagesize=100&page=3
http://example.com/item/data/?param=item&pagesize=100&page=4
....

However everytime I scroll the URL just becomes: http://example.com/item/data/?param=item&pagesize=100&page=1
http://example.com/item/data/?param=item&pagesize=100&page=1
http://example.com/item/data/?param=item&pagesize=100&page=1
http://example.com/item/data/?param=item&pagesize=100&page=1

which means the page parameter is never updated or even if it is the Shttp never executes it properly. Can some one tell me how to update the URL param in $http which pulls data from thirs party API.

The code looks roughly something like below:

var page = 1;
        var url = 'http://example.com/item/data/?param=item&pagesize=100&page=' + page;
        $http.get(url)
            .success(function(data, status, config, headers) {
                $scope.page = 1;
                for (var i = 0; i < data.items.length; i++) {
                    $scope.totalTags = data.items;
                    $scope.page += 1;

                }

            $scope.loading = false; 
        })
            .error...//rest of the stuff

Upvotes: 0

Views: 106

Answers (2)

Sycomor
Sycomor

Reputation: 1272

Several issues with your code :

  • var page and $scope.page are two different variables; you use the former to select the page in your $http request but never increment it. That's why you always get page 1.
  • your loop doesn't do what you want it to do : you replace your data a hundred times instead of appending the new data to the existing set, and you increment $scope.page a hundred times instead of once (but you don't use $scope.page so it doesn't do anything, especially since you put it back to 1 everytime you retrieve data).

Try this code snippet instead : 

$scope.page = 1;
var url = 'http://example.com/item/data/?param=item&pagesize=100&page=' + $scope.page;
$http.get(url)
    .success(function(data, status, config, headers) {
        for (var i = 0; i < data.items.length; i++) {
            $scope.totalTags.push(data.items[i]);
        }
        $scope.page += 1;
        $scope.loading = false; 
    })
    .error...//rest of the stuff

Upvotes: 1

Control Freak
Control Freak

Reputation: 13233

Seperate the url and parameters how the function allows you to, then it makes it much easier to make changes to your parameters.

 var url="http://example.com/item/data/";
 var params = {
    param:"item",
    pagesize:199,
    page:page
 };
 params.page = 2;

 $.get(url,params,function(data){});

Upvotes: 0

Related Questions