update all row numbers whenever there is re-order

I have a list of items in an array that can be re-ordered in the view, what I want to achieve is anything there is a re-order, the rowNumber property should be updated from 1 to the last number

array list

[{
    id: 1, Name: 'Jack', rowNumber:0,
},
{
    id: 2, Name: 'Mary', rowNumber:0,
},
{
    id: 5, Name: 'Dan', rowNumber:0,
}
]

JS

 let draggedItem = this.list.splice(event.detail.from,1)[0];
 this.list.splice(event.detail.to,0,draggedItem)
event.detail.complete();
console.log(this.list.forEach(e => {
    e.rowNumber++
}))

currently what I’m experiencing is after a re-order is done, each of the rowNumber gets updated to 1

Answer

Your code is incorrect. e.rowNumber++ is not doing what you think.

How about this:

const list = [
    {id: 1, Name: 'Jack', rowNumber:0},
    {id: 2, Name: 'Mary', rowNumber:0},
    {id: 5, Name: 'Dan', rowNumber:0}]
    
const ordered = list.map((e, idx) => ({...e, rowNumber: idx}))
console.log(ordered)