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

Question

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

{
  "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 数组，它为每个 permission 提供一个 name 和一个 id。即 id 可以匹配到 role-template 数组中的嵌套数组。我想通过每个数组拥有的 permission.id 属性来匹配这两个数组。然后对于每个具有 permission 的 role。我想为此

显示一个星号 *

我该怎么做？

[
  {
    "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" }]
      }
    }
  }
]

我的反应 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>
        );
    }
}

Answer 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>
        );
    }
}

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

How do I filter an array of data by id or name using another array of data to display in React Table?

javascript

reactjs

redux

react-table