Add item to array or substitute it if it has the same id

Question

I have this array of objects

var source = [
  {id: 1, label: "one"},
  {id: 2, label: "two"},
  {id: 3, label: "three"}
];

I need to add an item or substitute it if it has the same id

var new_sub = {id: 1, label: "new label for one"};
var new_add = {id: 4, label: "four"};

source = myFunc(new_sub);
source = myFunc(new_add);

function myFunc(obj) {
  return (source.findIndex(x => x.id === obj.id) === -1) ? 
  source.concat(obj) : source.map((item) => {
    return (item.id === obj.id) ? obj : item;
  });
}

This code works perfectly, but is there a better way to do this? You can check my code to this snippit:

var source = [
      {id: 1, label: "one"},
      {id: 2, label: "two"},
      {id: 3, label: "three"}
    ];
var new_sub = {id: 1, label: "new label for one"};
var new_add = {id: 4, label: "four"};

source = myFunc(new_sub);
source = myFunc(new_add);

function myFunc(obj) {
  return (source.findIndex(x => x.id === obj.id) === -1) ? 
   source.concat(obj) : source.map((item) => {
     return (item.id === obj.id) ? obj : item;
    });
}

//PRINT
var html = "";
source.map((item) => {
 html += "<li>" + item.id + " - " + item.label + "</li>";
});
$("#resp").html(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="resp">
</ul>

https://stackoverflow.com/questions/368280/javascript-hashmap-equivalent as i see it something[obj.id] should work fine? — Camile, Aug 02 '17 at 11:38
@Camile it should be `[obj.id - 1]` and it is not a solid way of doing this. — ibrahim mahrir, Aug 02 '17 at 11:39
Do you need to create a new array each time you call the function? — ibrahim mahrir, Aug 02 '17 at 11:40
Better in what way? Are you looking for better performance (I guess not since you don't state array size or your performance shortfalls and requirements)? Or better more readable code? — James, Aug 02 '17 at 12:12
Code optimised for performance is rarely more readable. Normally you don't optimise for performance and sacrifice readability before you have identified this piece of code as a performance bottleneck in your system. Have you? — James, Aug 02 '17 at 12:19

ibrahim mahrir · Answer 1 · 2017-08-02T12:06:03.593

1

function myFunc(obj) {
  let i = source.findIndex(x => x.id === obj.id); // get the index
  if(i === -1) sources.push(obj);                 // if there isn't any object that have the same id, then push this obj into the array
  else sources[i] = obj;                          // if there is then replace it
  return sources;                                 // this won't be necessary the array get mutated so no need to store it back into sources (see note bellow)
}

Note: Your version of myFunc creates a new array each time it is called. My version doesn't. But since you are storing the return value of myFunc back into sources, I guess creating a new array isn't needed (in my version you won't have to do sources = myFunc(...) as the array sources get mutated).

Older browsers support: (and actually better)

function myFunc(obj) {
  for (var i = 0; i < sources.length && sources[i].id !== obj.id; i++) // stop when reaching the end of the array or when we find an object with the same id
    ;                                                                  // empty loop (just using it to find the index)
  sources[i] = obj;                                                    // i will be either the index of the found object (so it will be replaced by obj) or sources.length (so obj will be added to the array)
}

edited Aug 02 '17 at 12:06

answered Aug 02 '17 at 11:38

ibrahim mahrir

31,174
5
48
73

2

You're *modifying* the input array. The OP's code makes a new array. That's an important semantic difference. – T.J. Crowder Aug 02 '17 at 11:39
@T.J.Crowder You're right. But I've just noticed that he is doing `sources = myFunc(...)`, thus creating a new array is not necessary. I added a note too. – ibrahim mahrir Aug 02 '17 at 11:44
1

@Red That OP's choice. He already was using arrow functions and `findIndex`. – ibrahim mahrir Aug 02 '17 at 11:44
Yeah, i know. Just noticing it for users who want to use this function for other cases :) – Red Aug 02 '17 at 11:46
1

@Red actually the older browser version look way better than the other version :) – ibrahim mahrir Aug 02 '17 at 11:58
@ibrahimmahrir I agree – Red Aug 02 '17 at 12:02

score 1 · Answer 2 · answered Aug 02 '17 at 11:43

You're making multiple passes over the array (one in findIndex, then one in either concat or map), which is unnecessary. Just a single pass will do it:

function myFunc(a, obj) {
  let found = false;
  const result = a.map(e => {
    if (!found && e.id === obj.id) {
      found = true;
      return obj;
    } else {
      return e;
    }
  });
  if (!found) {
    result.push(obj);
  }
  return result;
}

Note that I passed the source array into the function as an argument, so it doesn't have side-effects.

var source = [
  {id: 1, label: "one"},
  {id: 2, label: "two"},
  {id: 3, label: "three"}
];

var new_sub = {id: 1, label: "new label for one"};
var new_add = {id: 4, label: "four"};

source = myFunc(source, new_sub);
source = myFunc(source, new_add);

console.log(source);

function myFunc(a, obj) {
  let found = false;
  const result = a.map(e => {
    if (!found && e.id === obj.id) {
      found = true;
      return obj;
    } else {
      return e;
    }
  });
  if (!found) {
    result.push(obj);
  }
  return result;
}

Of course, if the array is small and you know that's the standard case, it doesn't really matter.

If you want to be concise at the expense of (in my view) abusing the , operator:

function myFunc(a, obj) {
  let found = false;
  const result = a.map(e => e.id === obj.id ? (found = true, obj) : e);
  if (!found) {
    result.push(obj);
  }
  return result;
}

Jonas Wilms · Answer 3 · 2017-08-02T11:59:13.777

If you do this often (insert a few thousand elements) it may be better (concerning performance) to build up a hash table ( which has a lookup time of O(1) instead of O(n) for searching an array):

var source = [
  {id: 1, label: "one"},
  {id: 2, label: "two"},
  {id: 3, label: "three"}
];
var hash = new Map(source.map((el,i)=>[el.id,i]));

function substitute(elem){
  var i = hash.get(elem.id);
  if(i !== undefined){
    return source[i] = elem;
  }
  hash.set(elem.id,source.push(elem));
}

In action

score 0 · Answer 4 · 2017-08-03T04:39:20.567

    
    function myFunc( o )
    {
      let i ;
      if ( (i = source[0].indexOf(o.id)) < 0 )
      {
        source[0].push(o.id) ; source.push(o)
      }
      else
      {
        source[1 + i] = o
      }
      // return JSON.parse(JSON.stringify(source)) // new Array with primitives
      return source  // As reference
    }
    
    var source = [
        [4, 1, 3, 2] // the trick here
      , {id: 4, label: "four"}
      , {id: 1, label: "one"}
      , {id: 3, label: "three"}
      , {id: 2, label: "two"}
    ];
    
    var new_sub = {id: 1, label: "new label for one"};
    var new_add = {id: 6, label: "six new label"};
    
    source = myFunc(new_sub);
    
    console.log("// => source after new sub", source);
    
    source = myFunc(new_add);
    
    console.log("// => source after new add", source);

Add item to array or substitute it if it has the same id

4 Answers4