how to keep track of objects inserted in an array-CodePudding

When clicking add it should keep inserting object to the array and the order Id should be based from the current order id 1 of the objects on the array so for example if if templatesDto is empty then every order in the object should increment starting from 0 when I click add

but for example there are existing data on the templatesDto example

[
    {
        "id": 255,
        "order": 0,

    },
    {
        "id": 256,
        "order": 1,
    },
     {
        "id": 256,
        "order": 2,
    },
]

then if I click add the next order value of the new added object should be 3 since the last one is 2.

Any idea guys ? Thank you.

#html code

 <button (click)="add()" mat-stroked-button mat-button >
                <mat-icon aria-label="Add" >add</mat-icon> Add 
            </button>

#ts code - to insert object to array

   this.templatesDto= []
    
      add() {
        this.templatesDto.push({
          id: 0,
          order : 0,
        })
      }

#sample result if I click add and there are no data in templatesDto

[
    {
        "id": 0,
        "order": 0,
    },
    {
        "id": 0,
        "order": 1,
    },
    {
        "id": 0,
        "order": 2,
    }
    ....
]

CodePudding user response：

Set order to call getNextOrder() with the function being:

function getNextOrder() {
    if (this.templatesDto.length === 0) {
        return 0
    }

    let maxOrder = 0
    for (const template of this.templatesDto) {
        if (template.order > maxOrder) {
            maxOrder = template.order
        }
    }
    return maxOrder   1
}

This function goes through all objects in the array, gets the highest order value and then returns it incremented by 1.

This should also work, even if the objects in the array are not ordered according to the order property.

CodePudding user response：

The best way to find the last number if there is one would be :

this.templatesDto.length > 0 ? this.templatesDto[this.templatesDto.length-1].order : 1

This way if there isn't an order already it will start at 1.

add() {
    const orderNo = this.templatesDto.length > 0 ? this.templatesDto[this.templatesDto.length-1].order   1 : 1 ; 
    this.templatesDto.push({
      id: 0,
      order : orderNo ,
    })
  }

CodePudding user response：

The previous answers are all correct and will be sufficient for the current state of the Question.

I however would append the case, that the Order might be shuffled or at any point an element would be remove, would eventually cause some issues.

For the case, that an element in the middle would be deleted/removed, it might not cause any trouble, as the SQL-like auto-increment would still work. But in the case, that the elements would be sorted or shuffled, the methods previously mentioned would fail, as the last element wouldn't be always the highest orderNum.

For the case, that at any point, the case occurs, i would like to submit a method, that takes this case in consideration.

add(){
  // We collect the last Order number
  const nextOrder = getLastOrderNum();

  // We can safely insert the lastOrderNum with a single increment.
  // If it is -1 we then insert 0 and so on.
  this.templatesDto.push({
    id: 0,
    order : (nextOrder   1)
  })
}

getLastOrderNum() {
  // We iterate through the entire Array and reduce it 
  // by returning the higher order.
  // If the Array has 0 elements, we will return the beginning Value of -1, 
  // which will latter be incremented to 0. 
  // With this we can spare some logic to check if the result were 0 and not 
  // increment.
  return this.templatesDto.reduce((a,b) => Math.(a, b.order), -1);
}