Javascript: Replacing items in array with another set of items

Question

I have an app where I fetch some data from my server and keep it in an array. When I display it I want to display it paginated so I decided to have 50 items per page.

I want to implement a refresh functionality so I can refresh the current viewed page. For example, if I've loaded 3 pages already, which means I have 150 items in my array, and I refresh page 2 (which means I fetch items 50-99 from my server) I want to replace the current items with the new items.

Basically what I want to do is to remove items 50-99 in my current array and insert "new" 50 items to the current array starting at index 50.

I tried doing so with:

// remove the items
items.splice((this.currentPage*50 -50), 50)

// add the new freshly grabbed items instead
Array.prototype.splice.apply(
    items,
    [(this.currentPage*50 -1), data.data.length].concat(data.data));

But it does seem to work kinda buggy. If I have only 1 page loaded then it works as expected. It deletes all of the 50 items and replaces them with the new items. However, if I have 2 pages loaded and I try to refresh page 1 I can suddenly see that the current items array length is 99 instead of 100. I tried playing with that but I just can't get it work :/

Any idea how I can efficiently delete a set of items from my array based on the current refreshed page and replace the deleted items with the new array that has the new items?

Do you need to delete the values from the array? Or can you just iterate over those elements and set them? — Marc
– Marc, Commented Nov 1, 2015 at 18:36

Nina Scholz · Accepted Answer · 2015-11-01 19:02:48Z

2

I think, you do not need this.

// remove the items
items.splice((this.currentPage*50 -50), 50)

otherwise you need to implement a 0 for the length like this:

// add the new freshly grabbed items instead
Array.prototype.splice.apply(
    items,
    [(this.currentPage - 1) * 50, 0].concat(data.data));
    //                            ^

The best thing, is to do it in one step like this:

var a = Array.apply(null, { length: 150 }).map(function (_, i) { return i; }),
    b = Array.apply(null, { length: 50 }).map(function (_, i) { return i + 1050; });

Array.prototype.splice.apply(a, [50, b.length].concat(b));            
document.write('<pre>' + JSON.stringify(a, 0, 4) + '</pre>');

edited Nov 1, 2015 at 19:02

answered Nov 1, 2015 at 18:38

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

kfirba Over a year ago

It seems like that if I remove the -1 from this.currentPage*50 -1 (and get the count "50" just like your answer suggests) it does remove and add the 50 elements. The only issue now is that it seems like now I get page 2 as page 1 and page 1 as page 2 (the pages has somehow swapped, which means that the new items are being appended to the end of the array instead of where I need it to be appended.

kfirba Over a year ago

I meant replacing the -1 with -50 so now for page 1 we start at position 0 (1*50 - 50 = 0) and for page 2 we start at position 50 (2*50 -50 = 50)

kfirba Over a year ago

You are right. I just needed to pass the item removal. I find it weird. Will splice override elements? If I tell it to start from index 50 and add 30 items while there are items 51, 52, 53, 54, ..., 80 will it just remove those items and replace with the new ones or push them an index?

Nina Scholz Over a year ago

splice works as well as deleting items as well as inserting item into the array. your need is to replace an amount of items.

Collectives™ on Stack Overflow

Javascript: Replacing items in array with another set of items

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related