Check if an object is present in a nested array reactjs

Question

I have the following set of data:

person:

person: { id:1
          groups:[
                  {id:1 , name: john, permissions : [{id:1 , codename="can_edit"},{id:2,codename="can_write"},{id:3,codename="can_delete"}]} ,
        
                  ]
            }

What i wish to do is conduct some conditional rendering based on whether this user has a permission.

             { this.passtest()?
            <Button type="primary" shape="circle" icon={<EditOutlined />}/>
              :
              null
              }

This will then call the this.passtest() method which will contain the logic for checking if the user has the permission i require :

   passtest(){
    const passing = this.props.person.groups.forEach(function(group) {
      // Not sure what logic I can put here to return true as long as the permission 'codename' field tallies 
     });

    return passing
  }

Would appreciate your help! Thanks!

What permission? What are you searching for in the forEach call? — sanitizedUser
– sanitizedUser, Commented Jun 2, 2020 at 7:55
the permission has a label codename which i will cross reference to. forEach call is used to iterate through all the Groups belonging to this person as there can be many — neowenshun
– neowenshun, Commented Jun 2, 2020 at 7:57
Your permissions have only ids. How do you get their label from that id? It's not part of the question and I think it might be important information. — sanitizedUser
– sanitizedUser, Commented Jun 2, 2020 at 7:59

Michael Mishin · Accepted Answer · 2020-06-02 08:33:21Z

1

passtest(codeName){
    return !!this.props.person.groups.find(group => group.permissions.find(permission => permission.codename === codeName));
}

Using:

{ 
  this.passtest('can_edit')?
  <Button type="primary" shape="circle" icon={<EditOutlined />}/>
  : null
}

For array of codeNames:

passtest(codeNames){
  return codeNames.every(
    codeName => !!this.props.person.groups.find(
      group => group.permissions.find(
        permission => permission.codeName === codeName
      )
    )
  )
}

Using:

{ 
  this.passtest(['can_edit', 'can_write'])?
  <Button type="primary" shape="circle" icon={<EditOutlined />}/>
  : null
}

edited Jun 2, 2020 at 8:33

answered Jun 2, 2020 at 7:59

Michael Mishin

5713 silver badges8 bronze badges

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

1 Comment

neowenshun Over a year ago

Hello , one last thing if i may , is it possible to modify this so that I can throw in a list of codeNames and it has to hit every criteria in that list of codeName?

Red Baron · Accepted Answer · 2020-06-02 08:03:10Z

0

it depends what permission you are looking for. if you're just looking for any you can do this:

   passtest(){
    const passing = this.props.person.groups.forEach(function(group) {
      return group.permission // this will true if permission array is > 0
     });

    return passing
  }

or if you're looking for something more specific

   passtest(){
    const passing = this.props.person.groups.forEach(function(group) {
      if  (group.permissions[0].id === 1) {
         return true
      }
      return false
     });

    return passing
  }

you can change this line: if(group.permissions[0].id === 1) to match any of the permissions you want

EDIT BELOW

if you change the permissions to be structured like this it should work:

permissions : {codename: 'codename'}

edited Jun 2, 2020 at 8:03

answered Jun 2, 2020 at 7:59

Red Baron

7,75312 gold badges48 silver badges115 bronze badges

6 Comments

neowenshun Over a year ago

correct me if iim wrong , can i adapt this method to do group.permission.codename === "can_edit"

Red Baron Over a year ago

you wont be able to that unless you change permission to be an object

neowenshun Over a year ago

its coming from permissions , its one of the fields other than id

Red Baron Over a year ago

based on your updated code you need to do this: permissions[0].codename but you can change [0] to be whichever one you're looking for

neowenshun Over a year ago

hey thank you so much for your help , but im still pretty confused with how would i go about checking through the entire permissions array using this method

|

Red Baron · Accepted Answer · 2020-06-02 08:08:25Z

0

   passtest(){
    const passing = this.props.person.groups.forEach(function(group) {
      group.permissions.forEach((permission) => {
        // do a check in here for each permission
        if (permission.codename === 'can_edit') {
            return true
        }
      })
      return false
     });

    return passing
  }

answered Jun 2, 2020 at 8:08

Red Baron

7,75312 gold badges48 silver badges115 bronze badges

2 Comments

neowenshun Over a year ago

Hey thanks so much for the help so far , however im getting an undefined when doing console.log(passing)

Red Baron Over a year ago

try using map instead of forEach

Collectives™ on Stack Overflow

Check if an object is present in a nested array reactjs

person:

3 Answers 3

1 Comment

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

person:

3 Answers 3

1 Comment

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related