问题
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>
);
}
}来源：https://stackoverflow.com/questions/51826360/how-do-i-filter-an-array-of-data-by-id-or-name-using-another-array-of-data-to-di