How to remove empty rows from an md-virtual-repeat-container? - angularjs

Question

The below code is working for me to get data on API calls but I have one question here. Every time it creates elements in DOM and populate the data which we get from API. But if I get lesser records it is showing blank/empty records. How can I remove or stop generating those blank records?
this.infiniteItems = {
numLoaded_: 0,
toLoad_: 0,
items: [],
getItemAtIndex: function (index) {
if (index > this.numLoaded_) {
this.fetchMoreItems_(index);
return null;
}
return this.items[index];
},
getLength: function() {
return this.numLoaded_ + 25;
},
fetchMoreItems_: function (index) {
if (this.toLoad_ < index) {
this.toLoad_ += 5;
var offset = 0;
$http({
method: 'GET',
datatype: 'json',
url: '{my-api-call}',
contentType: "application/json; charset=utf-8",
cache: false,
params: {
param: query,
page: offset
}
}).then(angular.bind(this, function (obj) {
this.items = this.items.concat(obj.data.SearchResults);
this.numLoaded_ = this.toLoad_;
this.offset++;
$scope.searchResults = obj.data.SearchResults;
}));
}
}
};
Thanks in advance.

Answer 1

I had the same problem and I solved it like this:
$scope.infiniteBrands = {
numLoaded_: 0,
toLoad_: 0,
items: [],
page: -1,
hasMoreItems: true,
perPage: 7,
//REQUIRED.
getItemAtIndex: function(index) {
if (index > this.numLoaded_) {
this.fetchMoreItems_(index);
return null;
}
return this.items[index];
},
//REQUIRED
getLength: function() {
return this.numLoaded_ + 1;
},
fetchMoreItems_: function(index) {
if ( this.hasMoreItems && (this.toLoad_ < index)) {
this.page++;
this.toLoad_ += this.perPage;
brandsFactory.getBrands(this.perPage, this.page)
.then(angular.bind(this, function (data) {
this.items = this.items.concat(data);
if(data.length < this.perPage){
this.numLoaded_ = this.toLoad_ - (this.perPage - data.length) -1;
this.hasMoreItems = false;
}else{
this.numLoaded_ = this.toLoad_;
}
}))
.catch(function(errorResponse){
console.log('Error in brands controller, status : ', errorResponse.status);
});
}
}
};
As you can see the lines that prevents the empty rows are:
if(data.length < this.perPage){
this.numLoaded_ = this.toLoad_ - (this.perPage - data.length) -1;
this.hasMoreItems = false;
}else{
this.numLoaded_ = this.toLoad_;
}
where this.perPage are the number of items I want to ask per page but if the server returns me a lower number, because there are no more, I need to substract those from the this.numLoaded_ variable.
Its late but I hope it helps to anyone who had the same problem.

Answer 2

You should check if your API call has reached the lastPage.
fetchMoreItems_: function (index) {
if ((this.toLoad_ < index) && !this.lastPage) {
this.toLoad_ += this.size;
newsActions.getNews(this.page++, this.size).then(angular.bind(this, function (newsData) {
this.items = this.items.concat(newsData.content);
this.numLoaded_ = this.toLoad_ >= newsData.totalElements ? newsData.totalElements : this.toLoad_ ;
this.lastPage = newsData.last;
}));
}
}
Then use it in getLength function:
getLength: function () {
if(this.lastPage){
return this.numLoaded_
}
return this.numLoaded_ + 2;
},