What is an alternative way to update an array of objects?

Question

I have a array of objects. I want to update an object using id.

I am able to do using the map function. Is there an alternative way or more efficient way to update the array?

Here is my code: https://stackblitz.com/edit/js-xgfwdw?file=index.js

var id = 3
var obj = {
  name: "test"
}
let arr = [{
  name: "dd",
  id: 1
}, {
  name: "dzxcd",
  id: 3
}, {
  name: "nav",
  id: 5
}, {
  name: "hhh",
  id: 4
}]

function getUpdated(obj, id) {
  var item = [...arr];
  const t = item.map((i) => {
    if(i.id==id){
      return {
        ...obj,
        id
      }
    }else {
      return i;
    }
  })
  return t
}

console.log(getUpdated(obj,id))

The expected output is correct but I want to achieve the same functionality using an alternative way.

[{
      name: "dd",
      id: 1
    }, {
      name: "test",
      id: 3
    }, {
      name: "nav",
      id: 5
    }, {
      name: "hhh",
      id: 4
    }]

I don't see anything wrong with this. Maybe use a ternary instead of if/else? But that would be a matter of syntax preference. — Baruch
– Baruch, Commented Jan 18, 2019 at 16:21

Prince Hernandez · Accepted Answer · 2019-01-18 16:28:18Z

4

you are in the correct way, basically the bad thing that you are doing is creating new arrays [...arr], when map already gives you a new array.

other things to use, may be the ternary operator and return directly the result of the map function

check here the improvedGetUpdate:

var id = 3;

var obj = {
  name: "test"
};

let arr = [{
  name: "dd",
  id: 1
}, {
  name: "dzxcd",
  id: 3
}, {
  name: "nav",
  id: 5
}, {
  name: "hhh",
  id: 4
}]

function getUpdated(obj, id) {
  var item = [...arr];
  const t = item.map((i) => {
    if (i.id == id) {
      return {
        ...obj,
        id
      }
    } else {
      return i;
    }
  })
  return t
}

improvedGetUpdate = (obj, id) => arr.map(i => {
  return i.id !== id ? i : {
    ...obj,
    id
  }
})

console.log(getUpdated(obj, id))
console.log(improvedGetUpdate(obj, id))

answered Jan 18, 2019 at 16:28

Prince Hernandez

3,7411 gold badge13 silver badges20 bronze badges

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

Comments

Eugenio Valeiras · Accepted Answer · 2019-01-18 16:40:15Z

2

var id = 3
var obj = {
  name: "test"
}
let arr = [{
  name: "dd",
  id: 1
}, {
  name: "dzxcd",
  id: 3
}, {
  name: "nav",
  id: 5
}, {
  name: "hhh",
  id: 4
}]

const result = arr.map((el) => el.id === id ? {...obj, id} : el)

console.log(result);

edited Jan 18, 2019 at 16:40

Eugenio Valeiras

1,0201 gold badge10 silver badges30 bronze badges

answered Jan 18, 2019 at 16:30

J. Nicastro

2543 silver badges11 bronze badges

Comments

quirimmo · Accepted Answer · 2019-01-18 16:22:26Z

1

Use splice method which can be used to update the array too:

var obj = {
  id: 3,
  name: "test"
}
let arr = [{
  name: "dd",
  id: 1
}, {
  name: "dzxcd",
  id: 3
}, {
  name: "nav",
  id: 5
}, {
  name: "hhh",
  id: 4
}]

arr.splice(arr.findIndex(({id}) => id === obj.id), 0, obj);
console.log(arr);

answered Jan 18, 2019 at 16:22

quirimmo

10k3 gold badges33 silver badges46 bronze badges

Comments

eustatos · Accepted Answer · 2019-01-18 16:39:44Z

0

@quirimmo suggested short code. I suggest fast code.

var id = 3;
var obj = {
  id:   3,
  name: "test"
}
let arr = [{
  name: "dd",
  id: 1
}, {
  name: "dzxcd",
  id: 3
}, {
  name: "nav",
  id: 5
}, {
  name: "hhh",
  id: 4
}]
var arr2 = [...arr];
console.time('⏱');
arr.splice(arr.findIndex(({id}) => id === obj.id), 0, obj);
console.timeEnd('⏱');
console.time('⏱');
for (let item of arr2) {
  if (item.id === id) {
    item.name = obj.name;
    break;
  }
}
console.timeEnd('⏱');
console.log(arr2);

answered Jan 18, 2019 at 16:39

eustatos

7041 gold badge11 silver badges24 bronze badges

Collectives™ on Stack Overflow

What is an alternative way to update an array of objects?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related