Using filter to return only specific property of the key

user_10433835 0
Viewed 4159

I have an array object and inside that array object I need to filter and create an array based on isVerfied property.

If isVerfied property is true, I just need to push the name property of the object instead of pushing the entire object into an array

I tried this but it doesn't seem to be working since it is pushing the entire object.

const users = [
   {
         name: 'Varun', 
         age: '18', 
         isVerfied: 'true'
   }, 
   {
         name: 'Rahul', 
         age: '12', 
   }
]
 
const verfiedUserNameNew = users.filter(user => {
     if (user.isVerfied) return user.name
})

console.log(verfiedUserNameNew)

I tried with map as well 

const users = [
  {
        name: 'Varun', 
        age: '18', 
        isVerfied: 'true'
  }, 
  {
        name: 'Rahul', 
        age: '12', 
  },
]
         
const verfiedUserNameNew = users.map(user => {
  if (user.isVerfied) return user.name
})

console.log(verfiedUserNameNew)

But then it return varun and undefined. i know an alternate solution can be to create an array and run a for.Each loop, put an if condition inside that loop and then push the element into an array 

const users = [
  {
        name: 'Varun', 
        age: '18', 
        isVerfied: 'true'
  }, 
  {
        name: 'Rahul', 
        age: '12', 
  },
]
     
const newArray = []
users.forEach(element => {
  if (element.isVerfied) {
        newArray.push(element.name) 
  } 
}) 
     
console.log(newArray)

But I was thinking if we could achieve this using filter method?

arrays functional-programming javascript
2 Answers

Neither filter nor map on its own can do this.

You have several options:

  1. filter and then map. This is simple and straightforward and appropriate for arrays up to the hundreds or low thousands of entries (at least), since it makes two passes through the data (well, one pass through all of the data and a second pass through the filtered result). Unless you're dealing with a truly massive array, there shouldn't be any performance issue.
  2. Use a simple loop and push to an array you create prior to the loop.
  3. Use reduce, which people commonly do although it's frankly just additional complication on top of #2.

Here's #1:

const verfiedUserNameNew = users
  .filter(user => user.isVerified)
  .map(({name}) => name);

Live Copy:

const users = [
  {
   name: 'Varun', 
   age: '18', 
   isVerified: true
  }, 
  {
   name: 'Rahul', 
   age: '12', 
  },
 ];
 
const verfiedUserNameNew = users
  .filter(user => user.isVerified)
  .map(({name}) => name);

console.log(verfiedUserNameNew);

I fixed two other thigns in there as well:

  1. Fixed the spelling of isVerified
  2. Used a boolean, not a string, for isVerified

Here's #2:

const verfiedUserNameNew = [];
for (const {isVerified, name} of users) {
  if (isVerified) {
    verfiedUserNameNew.push(name);
  }
}

Live Copy:

const users = [
  {
   name: 'Varun', 
   age: '18', 
   isVerified: true
  }, 
  {
   name: 'Rahul', 
   age: '12', 
  },
 ];
 
const verfiedUserNameNew = [];
for (const {isVerified, name} of users) {
  if (isVerified) {
    verfiedUserNameNew.push(name);
  }
}

console.log(verfiedUserNameNew);

Here's #3, but again, this is just a more complicated, harder to read and debug version of #2:

const verfiedUserNameNew = users.reduce((verified, {isVerified, name}) => {
  if (isVerified) {
    verified.push(name);
  }
  return verified;
}, []);

Live Copy:

const users = [
  {
   name: 'Varun', 
   age: '18', 
   isVerified: true
  }, 
  {
   name: 'Rahul', 
   age: '12', 
  },
 ];
 
const verfiedUserNameNew = users.reduce((verified, {isVerified, name}) => {
  if (isVerified) {
    verified.push(name);
  }
  return verified;
}, []);

console.log(verfiedUserNameNew);

You'll see people doing this:

const verfiedUserNameNew = users.reduce((v, {isVerified, name}) => ((isVerified ? v.push(name) : undefined), v), []);

or similar to make it look like it's simpler than it is, but, well... :-)

user_1572470

You can use reduce

const users = [{name: 'Varun',age: '18',isVerfied: 'true'},{name: 'Rahul',age: '12',},]

const verfiedUserNameNew = users.reduce((op,{name,isVerfied}) => {
  if (isVerfied) op.push(name)
  return op
}, [])

console.log(verfiedUserNameNew)

user_96244350
Related