Currently, I am utilizing jsgrid and facing an issue with loading a JSON file containing 5000 registries into a grid page by page. My goal is to display only 50 registries per page without loading all 5000 at once. Even though I have implemented paging in my grid, it still reads the entire JSON file each time. Below is the code snippet from my controller:
controller: {
loadData: function(filter) {
var def = $.Deferred();
$.ajax({
url: "http://www.json-generator.com/api/json/get/clGvbnRZmG?indent=2", //5000
//url: "http://www.json-generator.com/api/json/get/cpERCWvHzC?indent=2", //5
dataType: "json",
data: filter
}).done(function(response) {
var startIndex = (filter.pageIndex - 1) * filter.pageSize;
var filteredArray = response;
// Filter criteria
if (filter.name !== "") {
filteredArray= $.grep(filteredArray, function(item) {
return item.name.includes(filter.name);
});
} if (filter.age !== undefined) {
filteredArray= $.grep(filteredArray, function(item) {
return item.age === filter.age;
});
} if (filter.email !== "") {
filteredArray= $.grep(filteredArray, function(item) {
return item.email.includes(filter.email);
});
} if (filter.gender !== "") {
filteredArray= $.grep(filteredArray, function(item) {
return item.gender === filter.gender;
});
}
// Sorting logic
if (filter.hasOwnProperty("sortField")) {
if (filter.sortOrder === "asc") filteredArray.sort(ascPredicateBy(filter.sortField));
else filteredArray.sort(descPredicateBy(filter.sortField));
}
var dataToDisplay = {
data: filteredArray.slice(startIndex, startIndex + filter.pageSize),
itemsCount: filteredArray.length
};
def.resolve(dataToDisplay);
});
return def.promise();
}
I have utilized slice method to extract a portion of the object array for display on the page.
I am unsure if this limitation is specific to jsgrid or AJAX itself. It seems retrieving only a part of the JSON using AJAX may not be feasible.