如何使用另一个数据数组按 id 或名称过滤数据数组以显示在 React Table 中？

IT技术 javascript reactjs redux react-table
2021-05-03 08:36:10

我有一个role-template数组，每个数组都给出roleaname和 a description。它还有一个嵌套对象，其中包含一个permissions由 标识的数组id。

{
  "data": [
    {
      "id": "1",
      "type": "role-templates",
      "attributes": {
        "name": "Org Admin"
      },
      "relationships": {
        "permissions": {
          "data": [
            { "type": "permissions", "id": "1" },
            { "type": "permissions", "id": "2" },
            { "type": "permissions", "id": "3" },
            { "type": "permissions", "id": "4" },
            { "type": "permissions", "id": "5" },
            { "type": "permissions", "id": "6" },
            { "type": "permissions", "id": "7" },
            { "type": "permissions", "id": "8" },
            { "type": "permissions", "id": "9" },
            { "type": "permissions", "id": "10" },
            { "type": "permissions", "id": "11" },
            { "type": "permissions", "id": "12" },
            { "type": "permissions", "id": "13" },
            { "type": "permissions", "id": "14" },
            { "type": "permissions", "id": "15" },
            { "type": "permissions", "id": "17" },
            { "type": "permissions", "id": "18" },
            { "type": "permissions", "id": "19" },
            { "type": "permissions", "id": "20" },
            { "type": "permissions", "id": "21" },
            { "type": "permissions", "id": "23" },
            { "type": "permissions", "id": "24" }
          ]
        }
      }
    },
    {
      "id": "2",
      "type": "role-templates",
      "attributes": { "name": "Data Admin" },
      "relationships": {
        "permissions": {

          "data": [
            { "type": "permissions", "id": "1" },
            { "type": "permissions", "id": "2" },
            { "type": "permissions", "id": "3" },
            { "type": "permissions", "id": "4" },
            { "type": "permissions", "id": "5" },
            { "type": "permissions", "id": "6" }
          ]
        }
      }
    },
    {
      "id": "3",
      "type": "role-templates",
      "attributes": {
        "name": "Setup Admin"
      },
      "relationships": {        
        "permissions": {
          "data": [{ "type": "permissions", "id": "8" }]
        }
      }
    },
    {
      "id": "4",
      "type": "role-templates",
      "attributes": { "name": "Data Consumer"},
      "relationships": {
        "permissions": {
          "data": [
            { "type": "permissions", "id": "11" },
            { "type": "permissions", "id": "13" }
          ]
        }
      }
    },
    {
      "id": "5",
      "type": "role-templates",
      "attributes": { "name": "APT User" },
      "relationships": {
        "permissions": {
          "data": [
            { "type": "permissions", "id": "17" },
            { "type": "permissions", "id": "18" },
            { "type": "permissions", "id": "19" }
          ]
        }
      }
    },
    {
      "id": "6",
      "type": "role-templates",
      "attributes": {
        "name": "User Admin"
      },
      "relationships": {
        "permissions": {
          "data": [
            { "type": "permissions", "id": "21" },
            { "type": "permissions", "id": "23" }
          ]
        }
      }
    }
  ],
  "meta": { "record-count": 6 }
}

现在我有一个permissions数组，每个数组都给出permissionaname和id。这id可以与数组中的嵌套数组匹配role-template。我想通过permission.id每个数组所拥有的属性来匹配这两个数组。然后对于每个role具有permission. 我想显示星号，*此

我怎样才能做到这一点？ 

[
  {
    "id": "1",
    "type": "permissions",
    "attributes": {
      "name": "Administer Source List",
    },
    "relationships": {
      "roles": {
        "data": [
          { "type": "roles", "id": "1" },
          { "type": "roles", "id": "2" },
          { "type": "roles", "id": "7" },
          { "type": "roles", "id": "8" }
        ]
      }
    }
  },
  {
    "id": "2",
    "type": "permissions",
    "attributes": {
      "name": "Administer Common Layers",
    },
    "relationships": {
      "roles": {
        "data": [
          { "type": "roles", "id": "1" },
          { "type": "roles", "id": "2" },
          { "type": "roles", "id": "7" },
          { "type": "roles", "id": "8" }
        ]
      }
    }
  },
  {
    "id": "3",
    "type": "permissions",
    "attributes": {
      "name": "Do benchmark tagging"
    },
    "relationships": {
      "roles": {
        "data": [
          { "type": "roles", "id": "1" },
          { "type": "roles", "id": "2" },
          { "type": "roles", "id": "7" },
          { "type": "roles", "id": "8" }
        ]
      }
    }
  },
  {
    "id": "4",
    "type": "permissions",
    "attributes": {
      "name": "Do trend mapping"
    },
    "relationships": {
      "roles": {
        "data": [
          { "type": "roles", "id": "1" },
          { "type": "roles", "id": "2" },
          { "type": "roles", "id": "7" },
          { "type": "roles", "id": "8" }
        ]
      }
    }
  },
  {
    "id": "5",
    "type": "permisns",    
    "attributes": {
      "name": "Map custom values (for each data source)"
    },
    "relationships": {
      "roles": {       
        "data": [
          { "type": "roles", "id": "1" },
          { "type": "roles", "id": "2" },
          { "type": "roles", "id": "7" },
          { "type": "roles", "id": "8" }
        ]
      }
    }
  },
  {
    "id": "6",
    "type": "permissions",
    "attributes": {
      "name": "Administer Data Sets"
    },
    "relationships": {
      "roles": {        
        "data": [
          { "type": "roles", "id": "1" },
          { "type": "roles", "id": "2" },
          { "type": "roles", "id": "7" },
          { "type": "roles", "id": "8" }
        ]
      }
    }
  },
  {
    "id": "7",
    "type": "permisns"
    "attributes": {
      "name": "Create Campaigns"
    },
    "relationships": {
      "roles": {       
        "data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }]
      }
    }
  },
  {
    "id": "8",
    "type": "permissions",
    "attributes": {
      "name": "Access/modify campaign setup"
    },
    "relationships": {
      "roles": {        
        "data": [
          { "type": "roles", "id": "1" },
          { "type": "roles", "id": "3" },
          { "type": "roles", "id": "7" },
          { "type": "roles", "id": "9" }
        ]
      }
    }
  },
  {
    "id": "9",
    "type": "permissions",
    "attributes": {
      "name": "Launch campaigns"
    },
    "relationships": {
      "roles": {       
        "data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }]
      }
    }
  },
  {
    "id": "10",
    "type": "permissions",
    "attributes": {
      "name": "Create org-wide survey-related notifications"
    },
    "relationships": {
      "roles": {        
        "data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }]
      }
    }
  },
  {
    "id": "11",
    "type": "permissions",
    "attributes": {
      "name": "View Reports"
    },
    "relationships": {
      "roles": {       
        "data": [
          { "type": "roles", "id": "1" },
          { "type": "roles", "id": "4" },
          { "type": "roles", "id": "7" },
          { "type": "roles", "id": "10" }
        ]
      }
    }
  },
  {
    "id": "12",
    "type": "permissions",
    "attributes": {
      "name": "Modify prebuilt reports"
    },
    "relationships": {
      "roles": {        
        "data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }]
      }
    }
  },
  {
    "id": "13",
    "type": "permissions",
    "attributes": {
      "name": "Create new reports"
    },
    "relationships": {
      "roles": {        
        "data": [
          { "type": "roles", "id": "1" },
          { "type": "roles", "id": "4" },
          { "type": "roles", "id": "7" },
          { "type": "roles", "id": "10" }
        ]
      }
    }
  },
  {
    "id": "14",
    "type": "permissions",
    "attributes": {
      "name": "Share reports with rest of org"
    },
    "relationships": {
      "roles": {        
        "data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }]
      }
    }
  },
  {
    "id": "15",
    "type": "permissions",
    "attributes": {
      "name": "Share filters with rest of org"
    },
    "relationships": {
      "roles": {        
        "data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }]
      }
    }
  },
  {
    "id": "16",
    "type": "permissions",
    "attributes": {
      "name": "Create portfolio"
    },
    "relationships": {
      "roles": {        
        "data": []
      }
    }
  },
  {
    "id": "17",
    "type": "permissions",
    "attributes": {
      "name": "Access all portfolios (at org)"
    },
    "relationships": {
      "roles": {        
        "data": [
          { "type": "roles", "id": "1" },
          { "type": "roles", "id": "5" },
          { "type": "roles", "id": "7" },
          { "type": "roles", "id": "11" }
        ]
      }
    }
  },
  {
    "id": "18",
    "type": "permissions",
    "attributes": {
      "name": "Assign action plans"
    },
    "relationships": {
      "roles": {        
        "data": [
          { "type": "roles", "id": "1" },
          { "type": "roles", "id": "5" },
          { "type": "roles", "id": "7" },
          { "type": "roles", "id": "11" }
        ]
      }
    }
  },
  {
    "id": "19",
    "type": "permissions",
    "attributes": {
      "name": "Work on action plans"
    },
    "relationships": {
      "roles": {        
        "data": [
          { "type": "roles", "id": "1" },
          { "type": "roles", "id": "5" },
          { "type": "roles", "id": "7" },
          { "type": "roles", "id": "11" }
        ]
      }
    }
  },
  {
    "id": "20",
    "type": "permissions",
    "attributes": {
      "name": "Administer role templates for org"
    },
    "relationships": {
      "roles": {        
        "data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }]
      }
    }
  },
  {
    "id": "21",
    "type": "permissions",
    "attributes": {
      "name": "Add/edit/delete non org-admin users at org"
    },
    "relationships": {
      "roles": {        
        "data": [
          { "type": "roles", "id": "1" },
          { "type": "roles", "id": "6" },
          { "type": "roles", "id": "7" },
          { "type": "roles", "id": "12" }
        ]
      }
    }
  },
  {
    "id": "22",
    "type": "permissions",
    "attributes": {
      "name": "Add/edit/dete ORg Admin users at org"
    },
    "relationships": {
      "roles": {        
        "data": []
      }
    }
  },
  {
    "id": "23",
    "type": "permissions",
    "attributes": {
      "name": "Administer access patterns at org"
    },
    "relationships": {
      "roles": {        
        "data": [
          { "type": "roles", "id": "1" },
          { "type": "roles", "id": "6" },
          { "type": "roles", "id": "7" },
          { "type": "roles", "id": "12" }
        ]
      }
    }
  },
  {
    "id": "24",
    "type": "permissions",
    "attributes": {
      "name": "Switch user (\"Impersonate\" another user)"
    },
    "relationships": {
      "roles": {        
        "data": [{ "type": "roles", "id": "1" }, { "type": "roles", "id": "7" }]
      }
    }
  }
]

我的react表现在看起来像这样： 具有角色和权限的 React Table

我想要做的是*在每个单元格中为permission每个角色所拥有的一个星号。

我的React组件目前看起来像这样：

class SystemRoleTemplatesContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            permissionList: [],
            roleTemplateList: [],
            permissionsGroup: []
        };
    }

    componentDidMount = () => {
        this.getTableData();
    }

    getTableData = () => {
        store.dispatch(api.getRoletemplates()).then((result) => {
            const permissionHeader = [{
                Header: "Permissions",
                accessor: "permission"
            }]
            const roleTemplateItems = result.body.data.map((data) => {
                return {
                    id: data.relationships.permissions.data.map((data)=>{
                        return {
                            id: data.id
                        }
                     }),
                    Header: data.attributes.name,
                    accessor: data.attributes.name.replace(/\s/g, '')              
                }
            });
            const roleTemplate = permissionHeader.concat(roleTemplateItems)
            this.setState(() => ({
                "roleTemplateList": roleTemplate
            }));             
        });     
        store.dispatch(api.getPermissions()).then((result) => {
            const permissionItems = result.body.data.map((data) => {
                return {
                    id: data.id,
                    permission: data.attributes.name
                }
            });
            
            this.setState(() => ({
                "permissionList": permissionItems
            })); 
        });  
    }

    render() {
        const {isLoading,roleTemplateList, permissionList} = this.state;

        if (isLoading) {
            return <LoadingAnimation />;
        }

        
        return (
            <div className="role-management-form">
                <div className="admin-user-container-title">
                    <Row>
                        <Col md={8}>
                            <h3>Manage Roles Template for System</h3>
                        </Col>
                    </Row>
                </div>                
                <Table
                    columns={roleTemplateList}
                    className="organization-tbl"
                    data={permissionList}
                    defaultPageSize={50}
                    minRows={0}
                />
                
            </div>
        );
    }
}

1个回答

所以我能够用它lodash来完成这个。

class SystemRoleTemplatesContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            permissionList: [],
            roleTemplateList: []
        };
    }

    componentDidMount = () => {
        this.getTableData();
    }

    getTableData = () => {
        store.dispatch(api.getRoletemplates()).then((result) => {
            const permissionHeader = [{
                Header: "Permissions",
                accessor: "permission"
            }]
            const roleTemplateItems = result.body.data.map((data) => {
                return {
                    id: data.relationships.permissions.data.map((data)=>{
                        return {
                            id: data.id
                        }
                     }),
                    Header: data.attributes.name,
                    accessor: data.attributes.name.replace(/\s/g, '')              
                }
            });
            const roleTemplate = permissionHeader.concat(roleTemplateItems)
            this.setState(() => ({
                "roleTemplateList": roleTemplate
            }));             
        });     
        store.dispatch(api.getPermissions()).then((result) => {
            const permissionItems = result.body.data.map((data) => {
                return {
                    id: data.id,
                    permission: data.attributes.name
                }
            });
            
            this.setState(() => ({
                "permissionList": permissionItems
            })); 
        });  
    }

    render() {
        const {isLoading,roleTemplateList, permissionList} = this.state;
        const updatedList = permissionList.map(permission => {
            return roleTemplateList.reduce((permAcc, role) => {
                const match = _.find(role.id, {'id': permAcc.id});
                if(typeof match !== 'undefined'  && role.accessor !== 'permission') {
                    permAcc[role.accessor] = '*';
                } else if(role.accessor !== 'permission') {
                    permAcc[role.accessor] = '';    
                }
                return permAcc;
            }, permission);
        });

        if (isLoading) {
            return <LoadingAnimation />;
        }
        
        return (
            <div className="role-management-form">
                <div className="admin-user-container-title">
                    <Row>
                        <Col md={8}>
                            <h3>Manage Roles Template for System</h3>
                        </Col>
                    </Row>
                </div>                
                <Table
                    columns={roleTemplateList}
                    className="organization-tbl"
                    data={updatedList}
                    defaultPageSize={50}
                    minRows={0}
                />
                
            </div>
        );
    }
}

带星号的角色表

其它你可能感兴趣的问题
上一篇当 Material Ui 网格包裹在 div 元素中时布局中断 下一篇当标记放置在不同位置时，如何阻止谷歌地图重新渲染并仅保留输入字段中的值？