how to replace an element with a specific index in an array of objects-Javascript

Question

I have array of objects:

var arr=[
{name:"d", op: "GTE", field:"ddd"},
{name:"dss", op: "LTE", field:"d4dd"},
{name:"dss", op: "GE", field:"ddddd"}]

I have managed to get index of every array in the element, however I'm not sure how to replace the whole object with new values? ex: at index 2, I want the object to look like this after update:

var arr=[
    {name:"d", op: "GTE", field:"ddd"},
    {name:"dss", op: "LTE", field:"d4dd"},
    **{name:"lithe", op: "GE", field:"34545"}**
]

how can i achieve this?

What is the change?

ibrahim mahrir
– ibrahim mahrir

2018-08-24 00:02:28 +00:00
Commented Aug 24, 2018 at 0:02 — ibrahim mahrir
– ibrahim mahrir, Commented Aug 24, 2018 at 0:02
prop - name and field has changed

user1234
– user1234

2018-08-24 00:04:08 +00:00
Commented Aug 24, 2018 at 0:04 — user1234
– user1234, Commented Aug 24, 2018 at 0:04

Antiokus · Accepted Answer · 2018-08-24 00:05:11Z

12

Just use simple array access and reassign at the index

arr[indexValue] = myNewObject

answered Aug 24, 2018 at 0:05

Antiokus

5443 silver badges8 bronze badges

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

Comments

Kamil Leis · Accepted Answer · 2018-08-24 00:07:16Z

4

arr[2] = {name:"lithe", op: "GE", field:"34545"}

answered Aug 24, 2018 at 0:07

Kamil Leis

1297 bronze badges

Comments

ibrahim mahrir · Accepted Answer · 2018-08-24 00:26:16Z

3

You can assign the new element values to replace the existing one in the array. like:

 var newElement = {name:"lithe", op: "GE", field:"34545"};

 arr[2] = newElement;

See demo:

var arr = [{
    name: "d",
    op: "GTE",
    field: "ddd"
  },
  {
    name: "dss",
    op: "LTE",
    field: "d4dd"
  },
  {
    name: "dss",
    op: "GE",
    field: "ddddd"
  }
]
console.log("BEFORE");
console.log(arr);

var newElement = {name:"lithe", op: "GE", field:"34545"};

arr[2] = newElement;
/** 
if you need to loop thru the array and find our element, you can do this 

for(var idx=0; idx < arr.length; idx++){
  // any conditional here
  if( idx === 2 ){
     arr[idx] = newElement;
  }
}

*/
console.log("AFTER");
console.log(arr);

edited Aug 24, 2018 at 0:26

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

answered Aug 24, 2018 at 0:07

blurfus

14.1k9 gold badges63 silver badges69 bronze badges

1 Comment

ibrahim mahrir Over a year ago

You can hide the snippet to make the answer concise and let readers focus on what's important. Open the snippet editor and scroll to the bottom of the panel on the left, there is a checkbox that says hide snippet by default. You can also hide it from the markdown by changing hide: false to hide: true. I've taken the liberty to do that for you. You can roll back if you don't like it.

Colin Michael Flaherty · Accepted Answer · 2018-08-24 00:35:51Z

1

As other answers mention, you can easily directly access and reassign, i.e. arr[2]={name:"lithe", op: "GE", field:"34545"}.

However, if you want to be more efficient (i.e. only some fields in the object at arr[2] need to be updated, as is your case), it would be better for you to merge your new object with the one that already exists at arr[2]. To do so, you may Object.assign(arr[2], {name:"lithe", field:"34545"}) (ES5), or arr[2]={...arr[2],...{name:"lithe", field:"34545"}} (ES6).

edited Aug 24, 2018 at 0:35

answered Aug 24, 2018 at 0:18

Colin Michael Flaherty

7962 gold badges7 silver badges15 bronze badges

2 Comments

Barmar Over a year ago

Your ES6 example doesn't work in Chrome 63. this is not the object being assigned to, it's the global window object (or whatever the context of the command is).

Colin Michael Flaherty Over a year ago

@Barmar Good catch! Fixed

Collectives™ on Stack Overflow

how to replace an element with a specific index in an array of objects-Javascript

4 Answers 4

Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related