HTML:
<ion-item class="item-avatar" collection-repeat="event in events.event" ui-sref='gigdetail({index: $index})'>
<img src="img/placeholder.jpeg" ng-src={{event.image.thumb.url}} />
<h2>{{event.title}}</h2>
<p>{{event.city_name}}, {{event.start_time}}</p>
.controller("GigsCtrl", function ($scope, $timeout, gigService) {
$scope.events = [];
gigService.GetEvents().then(function (events) {
$scope.events = events;
})
$scope.loadMore = function () {
gigService.GetNewEvents().then(function (events) {
$scope.events = events.concat(events);
$scope.$broadcast('scroll.infiniteScrollComplete');
});
}
})
And the factory:
.factory('gigService', function ($http) {
var BASE_URL = "http://api.url.com/json/events/search? app_key=xxx&page_number=";
var events = [];
var nextPage = 2;
return {
GetEvents: function () {
return $http.get(BASE_URL + '1').then(function (response) {
events = response.data.events;
return events;
});
},
GetNewEvents: function () {
return $http.get(BASE_URL + nextPage).then(function (response) {
nextPage++;
events = response.data.events;
return events;
});
},
getEvent: function (index) {
return events.event[index];
}
}
})
This should work as far as I can tell but I keep getting concat undefined errors. There is an error with the line;$scope.events = events.concat(events); but I cant tell what it is.
I’ve also tried $scope.events = $scope.events.concat(events); and push(), and various combination which kept changing the results above rather than adding them to the previous items or loading a blank page that kept calling the url but not populating the list.
I’m loading JSON pages from an api and it is the page number I wish to increment. It should load another 20 items each time i reach the bottom of the page.However, its nested jSON so im wondering if thats the issue…