Ionic infinite scroll with JSON data [issue]

Hi,
I’ve just started using ionic framework (brilliant) and i’m new to angular. I have a web service running and the app is supposed to load data. I’ve managed to retrieve data, put, wordpress rest api is sending data in form of pages, and i don’t know how to achieve that with infinite-scroll on tabs, here is my html markup:

<ion-view title="All Wallpapers">
  <ion-content ng-controller="MyCtrl">
	<div class="row" >
    <div ng-controller="PostsController" >
		<div ng-repeat="post in posts">
			<div class="col col-50">
					<div class="list card">
						  <div class="item item-image">
							<img ng-src="{{post.thumbnail}}"></>
						  </div>

						  <a class="item item-icon-left assertive" href="#">
							<i class="icon ion-android-image"></i>
							{{post.thumbnail_images.full.width}} x {{post.thumbnail_images.full.height}}
						  </a>

					</div>
			</div>

				
	</div>

  </div>
  </div>
	 <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
 </ion-content>
</ion-view>

and in my apps.js i have:

wallweight.controller('PostsController', function($scope, $http) {
    $scope.page = 1;
	
    var url='http://wallweight.com/api/get_recent_posts?page';
    $http.get(url).
    success(function(data, status, headers, config) {

		$scope.posts = data.posts;
		console.log(data);
    }
).
 
	
    error(function(data, status, headers, config) {

    });

   
});
function MyCtrl($scope, $http) {
  $scope.posts = [];
  $scope.loadMore = function() {
    $http.get('http://wallweight.com/api/get_recent_posts?page=2').success(function(items) {
      $scope.posts.push($scope.posts.items);
      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  };

  $scope.$on('$stateChangeSuccess', function() {
    $scope.loadMore();
  });
}

The second function does load the data, but does not append it to the original data.
Thankyou for your time :slight_smile:

1 Like

Okay, ive managed to narrow down the problem. i was using the controllers wrong.
now i get the data, but the new data replaces the old data,

here is my js function

  function MyController($scope, $http) {
  $scope.posts = [];
  $scope.page=1;
  $scope.loadMore = function() {
    $http.get('http://wallweight.com/api/get_recent_posts?page='+$scope.page).success(function(items) {
      $scope.posts=items.posts;
	  console.log(items.posts);
      $scope.$broadcast('scroll.infiniteScrollComplete');
	  console.log($scope.page);
	  $scope.page +=1;
    });
  };

i understand $scope.posts = items.posts will replace the data - i just cant find a way to append it :stuck_out_tongue:

Go it working :smile:

function MyController($scope, $http) {
  $scope.posts = [];
  $scope.page=1;
  $scope.loadMore = function() {
    $http.get('http://wallweight.com/api/get_recent_posts?page='+$scope.page).success(function(items) {
	 var i = items.posts.length;
	 $scope.posts = $scope.posts.concat(items.posts);
	 $scope.posts.push(items);
	  console.log(items.posts[0]);
      $scope.$broadcast('scroll.infiniteScrollComplete');
	  console.log($scope.page);
	  $scope.page +=1;
    });
  };
2 Likes

hi farooq i am new to ionic and i am trying to implement infinite scrolling, when i try to replace my url with yours in get method nothing turns up. Can you please send me the entire code from first line to the last like you would be teaching a novice. so that i can take at all the libraries required . Thanks

why i get error : :disappointed: :frowning:

TypeError: Cannot read property ‘length’ of undefined
at controllers.js:65
at ionic.bundle.js:17151
at processQueue (ionic.bundle.js:20962)
at ionic.bundle.js:20978
at Scope.$get.Scope.$eval (ionic.bundle.js:22178)
at Scope.$get.Scope.$digest (ionic.bundle.js:21994)
at Scope.$get.Scope.$apply (ionic.bundle.js:22282)
at done (ionic.bundle.js:17439)
at completeRequest (ionic.bundle.js:17629)
at XMLHttpRequest.requestLoaded (ionic.bundle.js:17570)

Hi @farrukh, i try to use your code and it works fine when i scroll down. But my app not showing previous page when im scrolling up.
Could you help me to solve it?

Hi, i suggest:

// CONTROLLERS
.controller(‘CarsCtrl’, function($scope, $timeout, CarsFactory) {
$scope.cars = [];
$scope.currentPage = 0;

// Load More
$scope.loadMore = function (){
	CarsFactory.getCars($scope.currentPage).then(function (response){
		$scope.noMoreItemsAvailable = false;
		
		if(response.data){ 
			$scope.cars = $scope.cars.concat(response.data);
			//console.log("length: "+$scope.cars.length+', page: '+$scope.currentPage);
			$scope.noMoreItemsAvailable = true; // enable loadMore()
			$scope.currentPage += 1;
			$scope.$broadcast('scroll.infiniteScrollComplete');
		}

// response.data = “”

 	});
};
$scope.loadMore();

// refefresh
$scope.doRefresh = function() {
	$timeout(function () {
		$scope.loadMore();
		$scope.$broadcast('scroll.refreshComplete');
	}, 1000);
};

})

// SERVICES
.factory(‘CarsFactory’, function($http) {
var cars = [];

return {
	getCars: function(page){
		return $http.get('http://yourserver.com?page='+page).then(function(response){
			cars = response; // return response.data; 
			return cars;
		});
	}

// …
};
});

// EX: codeigniter

$per_page = (int)$this->input->get(‘page’);
//$offset = $this->config->item(‘per_page’);
$offset = 12;
$per_page = $per_page * $offset;

	$products 		= $this->ads->get_ads($offset, $per_page);
	if($products)
	{
		$ads = array();
		foreach ($products as $k=>$v)
		{
			$ads[$k]['id'] 			= $v->id;
			$ads[$k]['ad_headline'] = $v->ad_headline";
			$ads[$k]['ad_text'] 	= $v->ad_text";
			$ads[$k]['category'] 	= $v->category;
			$ads[$k]['cateid'] 	= $v->cateid;
		}
	}else {
		$ads = "";	
	}

	$this->load->view('ajax_output',array('data'=>$ads));
1 Like