I have a set of checkboxes that allow a user to check which roles to assign to a new user. I am able to filter back and get only the checkboxes that are actually checked, however, I am having trouble finding the best way to just return the "name" key of those checked checkboxes.

userToAdd.roles = this.roles.filter( (role) => role.checked );

Is there a way to use a reduce, or basically just say "role.name" in the filter so I don't return the entire object? I can do this with a for loop, but I'm curious if there is a better way to just return the name key as part of the filter?

This is how the object looks now, which is wrong:

{
  "firstName": "sfsdfds",
  "username": "fdsfsdf",
  "lastName": "sdfsdfsdf",
  "email": "dsfsdfdsf",
  "roles": [
    {
      "ID": "ce97fb46-7e04-4a4f-b393-5a5492b558fb",
      "name": "admin",
      "checked": true
    },
    {
      "ID": "e89bacd2-4140-46a1-9a2b-0f85aa9f9ca0",
      "name": "offline_access",
      "checked": true
    }
  ],
  "password": "pass"
}

This is how the object should look, in the roles array i just include the name, not the ID or checked keys:

{
  "firstName": "testing",
  "lastName": "testing",
  "username": "testing",
  "email": "testing",
  "roles": [
    "uma_authorization",
    "offline_access"
  ],
  "password": "pass"
}

I have a set of checkboxes that allow a user to check which roles to assign to a new user. I am able to filter back and get only the checkboxes that are actually checked, however, I am having trouble finding the best way to just return the "name" key of those checked checkboxes.

userToAdd.roles = this.roles.filter( (role) => role.checked );

Is there a way to use a reduce, or basically just say "role.name" in the filter so I don't return the entire object? I can do this with a for loop, but I'm curious if there is a better way to just return the name key as part of the filter?

This is how the object looks now, which is wrong:

{
  "firstName": "sfsdfds",
  "username": "fdsfsdf",
  "lastName": "sdfsdfsdf",
  "email": "dsfsdfdsf",
  "roles": [
    {
      "ID": "ce97fb46-7e04-4a4f-b393-5a5492b558fb",
      "name": "admin",
      "checked": true
    },
    {
      "ID": "e89bacd2-4140-46a1-9a2b-0f85aa9f9ca0",
      "name": "offline_access",
      "checked": true
    }
  ],
  "password": "pass"
}

This is how the object should look, in the roles array i just include the name, not the ID or checked keys:

{
  "firstName": "testing",
  "lastName": "testing",
  "username": "testing",
  "email": "testing",
  "roles": [
    "uma_authorization",
    "offline_access"
  ],
  "password": "pass"
}

• javascript
• angular
• typescript

• try array.filter with array.some – Sp0T Commented Mar 9, 2020 at 12:31
• developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – user5734311 Commented Mar 9, 2020 at 12:47

5 Answers 5

you could map after filtering. i.e:

userToAdd.roles = this.roles.filter( (role) => role.checked ).map(role => role.name;

You can achieve this using array map() method and object destructuring like:

userToAdd.roles = this.roles.filter(({checked}) => checked).map(({name}) => name);

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

Yes you can use reduce.

    const data = {
      "firstName": "sfsdfds",
      "username": "fdsfsdf",
      "lastName": "sdfsdfsdf",
      "email": "dsfsdfdsf",
      "roles": [
        {
          "ID": "ce97fb46-7e04-4a4f-b393-5a5492b558fb",
          "name": "admin",
          "checked": true
        },
        {
          "ID": "e89bacd2-4140-46a1-9a2b-0f85aa9f9ca0",
          "name": "offline_access",
          "checked": true
        },
        {
          "ID": "e89bacd2-4140-46a1-9a2b-0f85aa9f9ca0",
          "name": "offline_access2",
          "checked": false
        }
      ],
      "password": "pass"
    }


let filtered = data.roles.reduce((acc, curr)=>{
 if(curr.checked) {
   acc.push({
    name: curr.name
   })
 }
 
 return acc;

}, []);

console.log(filtered);

.filter().map() would also works but with reduce you don't have to iterate over array twice.

If you have linq, this is another option:

userToAdd.roles = from(this.roles).where(role => role.checked ).select(role =>role.name).toArray();

You can also use this:

this.roles.filter( (role) => role.checked )[0].anyPropert;