Verify whether an item exists within a nested array in ReactJS

Question

Verify whether an item exists within a nested array in ReactJS

Here is the dataset that I have:

Data:

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

I am trying to implement conditional rendering based on the user's permissions.

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

This will trigger the this.validatePermission() method where I will check if the required permission is present:

   validatePermission(){
    const result = this.props.data.groups.forEach(function(group) {
      // Implement logic here to return true if 'codename' matches 
     });

    return result
  }

Your assistance on this matter would be greatly appreciated. Thank you!

javascript reactjs

Answer 1

Answer №1

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

Access Granted:

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

For multiple permissions:

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

Using:

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

Answer 2

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

Access Granted:

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

For multiple permissions:

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

Using:

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

Answer 3

Answer №2

It all comes down to the specific permission you are searching for. If you want any permission, you can use this method:

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

    return passing
  }

However, if you have a particular permission in mind, you can do this:

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

    return passing
  }

If you want to target different permissions, simply adjust this line:

if(group.permissions[0].id === 1)

as needed.

EDIT BELOW

To make things work, try structuring your permissions like this:

permissions : {codename: 'codename'}

Answer 4

It all comes down to the specific permission you are searching for. If you want any permission, you can use this method:

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

    return passing
  }

However, if you have a particular permission in mind, you can do this:

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

    return passing
  }

If you want to target different permissions, simply adjust this line:

if(group.permissions[0].id === 1)

as needed.

EDIT BELOW

To make things work, try structuring your permissions like this:

permissions : {codename: 'codename'}

Answer 5

Answer №3

   checkPermissions(){
    const canEdit = this.props.person.groups.forEach(function(group) {
      group.permissions.forEach((permission) => {
        // checking each permission for edit access
        if (permission.codename === 'can_edit') {
            return true
        }
      })
      return false
     });

    return canEdit
  }

Answer 6

   checkPermissions(){
    const canEdit = this.props.person.groups.forEach(function(group) {
      group.permissions.forEach((permission) => {
        // checking each permission for edit access
        if (permission.codename === 'can_edit') {
            return true
        }
      })
      return false
     });

    return canEdit
  }

Verify whether an item exists within a nested array in ReactJS

Data:

Answer №1

Answer №2

Answer №3

Similar questions

StyledTab element unable to receive To or component attributes

What could be causing Typed.js to not function properly in my situation?

What is the best way to keep track of a checkbox's value after unchecking it and then returning to the same slide?

Is there a way for the React select component to adjust its width automatically based on the label size?

What is the best method to securely install a private Git repository using Yarn, utilizing access tokens without the need to hardcode them

Leveraging the power of AJAX with either jquery or plain javascript to parse nested JSON data and display the

I will evaluate two arrays of objects based on two distinct keys and then create a nested object that includes both parent and child elements

I dialed the network once, only to find it entangled in a tangle during the test

Singleton constructor running repeatedly in NextJS 13 middleware

Elevate the element from the choice API to the organization API using this.$parent

What does the typeof keyword return when used with a variable in Typescript?

What is the best way to showcase a half star rating in my custom angular star rating example?

How to send route parameters to a controller function in ExpressJS

Is it possible to adjust the width of a parent element based on the number of child

Creating a variety of Flexslider slideshows on the fly

Starting up the express server with a React client

Visual Editor for React Material UI - A Unique Designing Experience

What is the best way to transfer a request parameter from a URL to a function that generates an object with matching name in JavaScript?

ui-grid row size set to automatically adjust using rowHeight : 'auto'

Error: Supabase and Next.js encountered a self-signed certificate within the certificate chain causing an AuthRetryableFetchError