how to add object value after filter in javascript

Question

How to add object value after filter out javascript

var arr = [{
  id: 1,
  username: 'fred'
}, {
  id: 2,
  username: 'bill'
}, {
  id: 3,
  username: 'ted'
}];

var obj = {
  id: 3,
  online: true
}

const result = arr.filter((item) => {
  if (item.id === obj.id) {
    return {
      item,
      online: obj.online
    }
  }
})

console.log(result)

It should be

{
          id: 3, 
    username: "ted", 
      online: true
}

The callback function for [`Array.prototype.filter()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) should return `true` if you want to keep the element or `false` if you don't. It doesn't create new elements or modify existing ones from the return value. — Phoenix, Feb 11 '21 at 05:02
Possible duplicate https://stackoverflow.com/questions/32040396/how-to-use-es6-fat-arrow-to-filter-an-array-of-objects — steven7mwesigwa, Feb 11 '21 at 05:05
It is new question that does not relates to duplicate question why -minus — simon, Feb 11 '21 at 05:06
@simon, Did you read through the answer in the linked question?. `filter` returns an array, not a single object. — steven7mwesigwa, Feb 11 '21 at 05:12

score 3 · Accepted Answer · answered Feb 11 '21 at 04:58

3

Set item.online inside filter method.

var arr = [{
  id: 1,
  username: 'fred'
}, {
  id: 2,
  username: 'bill'
}, {
  id: 3,
  username: 'ted'
}];

var obj = {
  id: 3,
  online: true
}

const result = arr.filter((item) => {
  if (item.id === obj.id) {
    item.online = obj.online;
    return true;
  }
})

console.log(result)

answered Feb 11 '21 at 04:58

wangdev87

8,611
3
8
31

If I want to have only object return instead array return ? – simon Feb 11 '21 at 05:03
1

[`Array.prototype.filter()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) returns an array. You can access the object with `result[0]`. Or if you know that there will be only one true result, then you can just use a standard for loop. – Phoenix Feb 11 '21 at 05:10

danh · Answer 2 · 2021-02-11T06:07:06.673

1

The OP expected output is a single object. filter() returns an array. find() finds the first object meeting the criterion returned by the predicate function. It's poor style for the predicate function to have a side-effect.

find() the object, then modify it.

const arr = [{
  id: 1,
  username: 'fred'
}, {
  id: 2,
  username: 'bill'
}, {
  id: 3,
  username: 'ted'
}];

var obj = {
  id: 93,
  online: true
}

const result = arr.find(item => item.id === obj.id)
result ? result.online = true : null
console.log(result)

edited Feb 11 '21 at 06:07

answered Feb 11 '21 at 05:17

danh

62,181
10
95
136

Good answer, though you may need to add a check before `result.online = true` since `Array.prototype.find()` may return `undefined` for item not found. :) – steven7mwesigwa Feb 11 '21 at 05:34
Agree, @steven7mwesigwa – danh Feb 11 '21 at 06:07

Md Kawser Habib · Answer 3 · 2021-02-11T06:18:57.657

According to this problem, Object.assign() is more suitable to solve this problem. One by one value assignment creates many boilerplate, needs more effort.

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object. It returns the target object.
Properties in the target object are overwritten by properties in the sources if they have the same key. Later sources' properties overwrite earlier ones.

Code block:

var arr = [{
  id: 1,
  username: 'fred'
}, {
  id: 2,
  username: 'bill'
}, {
  id: 3,
  username: 'ted'
}];

var obj = {
  id: 3,
  online: true
}

function mergeObjByID(item) {
   if (item.id === obj.id){
    //overwrite item value 
    Object.assign(item,obj)
    return true
  }
}

const result = arr.filter(mergeObjByID); 

console.log(result)

More about Object.assign() example:

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

how to add object value after filter in javascript

3 Answers3