How to iterate through this array applying a decimal increase

Question

I have a list which has an Id column. When a user adds an item it starts with 3.1, and continues 3.2, 3.3, 3.4 as each item is added.

The problem: If a user deletes for e.g. 3.3 in a list of up to 3.7, the order of these Id's won't be sequential. I'm attempting with the below to iterate through the Id's to reorder them, starting with 3.1 for top row of the list.

Here's the delete function:

 const deleteItem = () => {
        const currentArray = myArr;
        for (var i = 0; i < currentArray .length; i++) {
  
            if (currentArray [i] == selectedItem) {
                currentArray .splice(i, 1);
            }
            setMyArr([...currentArray ]);
        }
          for(var i = 3.1; i < currentArray .length; i++){
        i + 0.1;
            
          }
    };

The first for, deletes the item and sets the array of items, the second for is my attempt to reset the order of the Ids.

I have looked at several solution on SO but not found them useful.

How would I do this.

Beware of [floating point imprecisions](https://stackoverflow.com/questions/588004/is-floating-point-math-broken) — VLAZ, Mar 10 '22 at 16:23
Yes - I've encountered that, I resolved in the past by using: Math.round((Math.max(...currentIds) + 0.1) * 100) / 100; — NightTom, Mar 10 '22 at 16:23

score 2 · Answer 1 · answered Mar 10 '22 at 16:31

You could filter the item you want to delete, and then set again the ids like this:

currentArray
  .filter(item => item !== selectedItem) // Remove the selectedItem from the array
  .map((item, idx) =>({...item, id:3.1 + index * 0.1}) // Reset the ids sequentially

score 1 · Accepted Answer · answered Mar 10 '22 at 16:29

1

The array indexes and length will not work with decimal values.

What I think you want to do is to iterate the array and set the id based on the id of the first one:

const finalArray = currentArray.map((item,index)=> ({...item, id:3.1 + index * 0.1});

as noted in comments to the question index * 0.1 is subject to rounding errors, so you should apply your roundings.

(I'm assuming your items are objects and have an id attribute)

answered Mar 10 '22 at 16:29

Tiago Coelho

5,023
10
17

This works, thanks - cheeky question. I can't seem to figure out how to round the result to avoid the rounding errors. – NightTom Mar 10 '22 at 16:51
https://stackoverflow.com/questions/7342957/how-do-you-round-to-1-decimal-place-in-javascript – Tiago Coelho Mar 10 '22 at 17:07
But which part of your line you gave do I need to wrap? – NightTom Mar 10 '22 at 17:08
`({...item, id: round(3.1 + index * 0.1, 1)});` using the round function from the link – Tiago Coelho Mar 10 '22 at 17:09
`id: (31+i)/10 ` also works fine – Tiago Coelho Mar 10 '22 at 17:12
Neither of those rounds work @Tiago. – NightTom Mar 10 '22 at 17:14
const finalArray = currentArray.map((item,index) => ({...item, Id:(31+i)/10 + index * 0.1})); - not working. It's also breaking the re-ordering. – NightTom Mar 10 '22 at 17:15
const finalArray = currentArray.map((item,index) => ({...item, Id:(31+index)/10 })); – Tiago Coelho Mar 10 '22 at 18:05

How to iterate through this array applying a decimal increase

2 Answers2