My JSON data consists of news entries with titles, text, and dates. Here is an example:
{
"news": [
{"title": "some title #1","text": "text","date": "27.12.15 23:45"},
{"title": "some title #2","text": "text","date": "26.12.15 22:35"},
...
]
}
To display a specific number of these news articles based on a function argument, I am considering implementing pagination. One approach involves slicing the ajax response directly each time the function is called to make a new ajax request.
function showNews(page) {
var newsPerPage = 5,
firstArticle = newsPerPage*(page-1);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
var newsArr = JSON.parse(xhr.responseText),
;
newsArr.news = newsArr.news.slice(firstArticle, newsPerPage*(page));
addNews(newsArr);
}
};
xhr.open("GET", url, true);
xhr.send();
Alternatively, I could store all results in newsArr and implement the slicing logic in a separate function like addNews, organized by pages.
function addNews(newsArr, newsPerPage) {
var pages = Math.ceil(amount/newsPerPages), // counts number of pages
pagesData = {};
for(var i=0; i<=pages; i++) {
var min = i*newsPerPages, //min index of current page in loop
max = (i+1)*newsPerPages; // max index of current page in loop
newsArr.news.forEach(createPageData);
}
function createPageData(item, j) {
if(j+1 <= max && j >= min) {
if(!pagesData["page"+(i+1)]) {
pagesData["page"+(i+1)] = {news: []};
}
pagesData["page"+(i+1)].news.push(item);
}
}
Which approach would be more efficient? The first method leads to server loading while the second one impacts user memory usage. What choice would you make in this scenario? :)
Thank you for your responses. I appreciate the insights provided, although selecting the best answer proves to be challenging due to the abundance of quality responses.