Add item into array without push

Question

Trying to do immutable way of pushing an array into existing array but somehow my code is not working.

function insertItem(array, action) {
  return [
    ...array.slice(0, action.index),
    action.item,
    ...array.slice(action.index)
  ]
}

const ori_arr = [{
  id: 1,
  name: 'james',
  age: 10
}, {
  id: 2,
  name: 'terrance',
  age: 20
}]

console.log(insertItem(ori_arr, {
  action: {
    index: 1,
    item: {
       id: 3,
       name: 'she',
       age: 44
    }
  }
}))

possibly wrong at the index part.

Not 100% sure I understand what you are trying to achieve, though I believe you'd want to use action.action.index - not action.index because that doesn't exist. — Chris
– Chris, Commented Nov 14, 2017 at 9:56
Yup, the {action: ... } in the function call is too much. You just want {index:1, item:...} — Niet the Dark Absol
– Niet the Dark Absol, Commented Nov 14, 2017 at 9:57
However it is very important to note that you are performing a shallow copy, so even though you have a new array, modifying the new one may cause issues (I'm not certain how const affects it) — Niet the Dark Absol
– Niet the Dark Absol, Commented Nov 14, 2017 at 9:57
Regardless of how you fix this, I recommend against using the same variable for both your input object and for the key. — Chris
– Chris, Commented Nov 14, 2017 at 10:00
@axiac nope, I've said earlier I want to do the immutable way, I can't use splice. — Jane Emelia
– Jane Emelia, Commented Nov 14, 2017 at 10:09

kind user · Accepted Answer · 2017-11-14 09:58:45Z

2

Since the object you want to add has a nested property action, you might want to use destructuring to get just the action key as your inserItem function's argument.

const insertItem = (array, { action }) => [
   ...array.slice(0, action.index),
   action.item,
   ...array.slice(action.index),
];

const ori_arr = [{
  id: 1,
  name: 'james',
  age: 10
}, {
  id: 2,
  name: 'terrance',
  age: 20
}]

console.log(insertItem(ori_arr, {
  action: {
    index: 1,
    item: {
       id: 3,
       name: 'she',
       age: 44
    }
  }
}))

Hovever, if you'd prefer to avoid destructuring, just change the name of your second argument in the insertItem function for e.g. obj and then just add obj before every action.index in your function:

const insertItem = (array, obj) => [
   ...array.slice(0, obj.action.index),
   obj.action.item,
   ...array.slice(obj.action.index),
];

answered Nov 14, 2017 at 9:58

kind user

42k8 gold badges69 silver badges78 bronze badges

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

2 Comments

Jane Emelia Over a year ago

does the order matter here? how is the order works? the new item got pushed to the last item or in the middle?

kind user Over a year ago

@JaneEmelia Yes, it does since you are slicing the original array on (0, 1), then you are inserting the new object and then adding the missing rest of the original array. If you want to add it at the end, you just need [...array, action.item].

anteAdamovic · Accepted Answer · 2017-11-14 10:00:00Z

0

You're passing the parameters incorrectly:

console.log(insertItem(ori_arr, {
  action: {
    index: 1,
    item: {
       id: 3,
       name: 'she',
       age: 44
    }
  }
}))

instead pass it without the action object:

console.log(insertItem(ori_arr, {
    index: 1,
    item: {
       id: 3,
       name: 'she',
       age: 44
    }
}))

If you tried logging it you'd see that inside your function insertItem you have a param called action, it's value (when you call it) is

action = { action: { index: 1, item: { id: 3, name: 'she', age: 44 }}}

so when you try to access action.item it doesn't exist.

Another solution would be to change your function to

function insertItem(array, action) {
  return [
    ...array.slice(0, action.action.index),
    action.action.item,
    ...array.slice(action.action.index)
  ]
}

answered Nov 14, 2017 at 10:00

anteAdamovic

1,44312 silver badges25 bronze badges

1 Comment

Jane Emelia Over a year ago

is there any case where slice is needed here? usually when user clicked a button to add something, either we push the new item to the start or to the end of the list, correct?

Collectives™ on Stack Overflow

Add item into array without push

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related