How do I filter an array of data by id or name usi

2019-06-09 19:22发布

站内文章 / JavaScript
54 0 0

问题:

I have a role-template array that gives each role a name, and a description. It also has a nested object with an array of permissions that are identified by 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 }
}

Now I have a permissions array that gives each permission a name, and an id. That id can be matched to the nested array in the role-template array. I want to match these two arrays by the permission.id property that each of these arrays posses. Then for each role that has a permission. I want to display an asterisk * for this

How can I do that? 

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

My react table looks like this right now:

What I want to do is to put an asterisk * in every cell for the permission that each role has.

My React component currently looks like this:

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:

So I was able to use lodash to accomplish this. 

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



标签： javascript reactjs redux react-table
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~