Changing part of an array object's property in javascript

Question

I have an array of objects similar to:

[
  {
    number: 1,
    name: "A"
  },
  {
    number: 2,
    name: "e",
  },
  {
    number: 3,
    name: "EE",
  }
]

I need to be able to insert an object to the array at a particular position, but then I have to shift all the numbers of rest of the object, so the numbers are in sequence order. Similarly I need to be able to remove an object, but be able to shift all the numbers back.

i.e. If I insert at location 1 with name: "F", the array became:

[
  {
    number: 1,
    name: "A"
  },
  {
    number: 2,
    name: "F"
  },
  {
    number: 3,
    name: "e",
  },
  {
    number: 4,
    name: "EE",
  }
]

I know a few ways that can do it, but none of them looks pretty. Post some of my thoughts here:

To insert I did this.arr.splice(1, 0, newObj), then tried to loop through this.arr, for any index greater than 2, I did ++number, this works, but ugly.
To insert I did this.arr.splice(1, 0, newObj), then split this.arr with let newArr = this.arr.split(2), then newArr.map(a => {...}), use splice to replace part of original arr with newArr.

New Edit: Share some of my code here, this works, but I'd like to simply it or make it prettier if possible. Please share thoughts.

const newObj = {
  number: obj.number + 1,
  name: 'S',
}
this.arr.splice(obj.number, 0, newObj)
if (this.arr.length > obj.number) {
  const remaining = this.arr.slice(obj.number + 1).map( (t) => ({...t, ...{number: t.number + 1}}))
  this.arr.splice(newObj.number, remaining.length, ...remaining)
}

What steps have you taken to achieve the different changes you're looking for? What worked and what didn't? Did you try searching "insert an object into an array at a particular position" before posting here? — Charlie Schliesser, Mar 15 '19 at 01:54
Are the numbers equal to element indices, or they're calculated by some algorythm? — Cerberus, Mar 15 '19 at 01:55
@CharlieSchliesser I edited the original post, accidentally posted it without finishing the edit. So the answer is, I'm not just trying to insert to a particular position, I want to be able to increase the number of the rest of objects. I'm able to do it, but my code looks ugly. Wanted to see if there's any better solution — user1491987, Mar 15 '19 at 01:59
See https://stackoverflow.com/questions/586182/how-to-insert-an-item-into-an-array-at-a-specific-index-javascript and https://stackoverflow.com/questions/10024866/remove-object-from-array-using-javascript — holydragon, Mar 15 '19 at 02:06
Why do you need to store the index location of the object in the array? Why not calculate it at run-time when/where you need it? — IMTheNachoMan, Mar 15 '19 at 02:09
@IMTheNachoMan That's part of the business requirements, for my company's confidential rule, I've omitted some requirements and details. But I'm afraid I can't calculate it at run-time — user1491987, Mar 15 '19 at 02:12

Naga Sai A · Accepted Answer · 2019-03-15T02:22:16.293

1

To achieve expected result , use splice(index, deleteCount, item) and use index in map to assign to number of each object to get numbers in sequence after you and delete

let arr = [
  {
    number: 1,
    name: "A"
  },
  {
    number: 2,
    name: "e",
  },
  {
    number: 3,
    name: "EE",
  }
]

let newObj = {
name: "F",
  }
arr.splice(1,0, newObj)//To add
  //  console.log(arr)

//arr.splice(2,1) //To delete
//console.log(arr);

console.log(arr.map((v,i) => {
  v.number = i;
  return v
}));

Reference link for Array.splice - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

edited Mar 15 '19 at 02:22

answered Mar 15 '19 at 02:00

Naga Sai A

10,771
1
21
40

Hey, Sorry my original post was accidentally submitted before finishing editing. But I'm not just trying to delete or insert to a particular position. Please look at the post, I've updated. – user1491987 Mar 15 '19 at 02:07
@user1491987, are you trying to sort by name? – Naga Sai A Mar 15 '19 at 02:13
Not trying to sort at all. I try to insert at a position then make sure the number is in sequential order – user1491987 Mar 15 '19 at 02:21
@user1491987, updated my answer, use index of map and assign to number , so it will automatically assign in order – Naga Sai A Mar 15 '19 at 02:22
Stupid me! Thanks, this works. Somehow I forgot about map can take index as well. – user1491987 Mar 15 '19 at 02:27

Code Maniac · Answer 2 · 2019-03-15T02:07:15.353

You can use ... spread syntax and slice.

operation is used to decide whether the value is to be deleted or added.
if operation is del than we slice the first from 0 upto index and than from index+1 to end of array.
else we slice from 0 upto index and add the desired value and than add the remaining part back ( from index to end )
Finally map over the values to adjust number property accordingly

let arr = [{ number: 1,name: "A"},{number: 2,name: "e",  }, {number: 3,name: "EE",}]

let handleArray = (array,operation,index,value) => {
  if(operation === 'del') {
    return [...array.slice(0, index), ...array.slice(index+1,)].map((value,index)=> (value.number = index+1, value))
  } else {
    return [...array.slice(0,index),value,...array.slice(index,)].map((value,index)=> (value.number = index+1,value))
  }
}

console.log(handleArray(arr,'add',0,{a:1}))
console.log(handleArray(arr,'del',0))

Changing part of an array object's property in javascript

2 Answers2