I need to dynamically insert a list of values as the key to be mapped over. The list here is employeeTypes. I need to map() over every role.supervisors and every role.employees..
Attempt:
export default function EmployeesByDepartmentList({ department }) {
const employeeTypes = ["supervisors", "employees"];
return (
<div className={styles.departmentSection} key={department.id}>
{department.roles.length
? department.roles.map((role) =>
employeeTypes.forEach((type) => { // this is my attempt at iterating over each item in employeeTypes to use as the role key
role[type].map((item) => (
<ListLinkItem
key={item.id}
id={item.id}
href={`employees/${item.id}/`}
>
<EmployeeImage
src={item.image}
alt={item.first_name item.last_name}
/>
</ListLinkItem>
));
})
)
: null}
</div>
);
}
I am sure it is easy, I just can't seem to visualize what I need atm. All help appreciated!
Edit:
This is the department object:
{
"id": 2,
"roles": [
{
"id": 1,
"employees": [],
"supervisors": [
{
"id": 8,
"role": "Casino Supervisor",
"last_login": "2022-05-06T13:34:44.934187-07:00",
"is_superuser": false,
"username": "T2Admin1",
"is_staff": true,
"is_active": true,
"date_joined": "2022-04-06T19:42:22-07:00",
"first_name": "T2Admin",
"last_name": "Admin1",
"badge_num": "1234",
"email_notifications": true,
"sms_notifications": true,
"points": 0,
"image": "/media/images/profile_pics/dealer.jpg",
"supervisor": null,
"company": 2,
"groups": [
1,
3
],
"user_permissions": []
},
],
"name": "Casino Supervisor",
"supervisor": null,
"group": 1,
"company": 2
},
{
"id": 11,
"employees": [
{
"id": 4,
"role": "Dealer",
"last_login": null,
"is_superuser": false,
"username": "T2Dealer2",
"is_staff": false,
"is_active": true,
"date_joined": "2022-04-06T19:32:08-07:00",
"first_name": "T2Dealer",
"last_name": "Dealer2",
"badge_num": "1234",
"email_notifications": true,
"sms_notifications": true,
"points": 0,
"image": "/media/images/profile_pics/dealer.jpg",
"supervisor": null,
"company": 2,
"groups": [
2
],
"user_permissions": []
},
],
"supervisors": [],
"name": "Dealer",
"supervisor": null,
"group": 2,
"company": 2
}
],
"created_on": "2022-04-14T16:15:27.299700-07:00",
"updated_on": "2022-04-21T12:31:24.773872-07:00",
"name": "Casino"
}
CodePudding user response：
You could try something like this:
const department = {
"id": 2,
"roles": [{
"id": 1,
"employees": [],
"supervisors": [{
"id": 8,
"role": "Casino Supervisor",
"last_login": "2022-05-06T13:34:44.934187-07:00",
"is_superuser": false,
"username": "T2Admin1",
"is_staff": true,
"is_active": true,
"date_joined": "2022-04-06T19:42:22-07:00",
"first_name": "T2Admin",
"last_name": "Admin1",
"badge_num": "1234",
"email_notifications": true,
"sms_notifications": true,
"points": 0,
"image": "/media/images/profile_pics/dealer.jpg",
"supervisor": null,
"company": 2,
"groups": [
1,
3
],
"user_permissions": []
}, ],
"name": "Casino Supervisor",
"supervisor": null,
"group": 1,
"company": 2
},
{
"id": 11,
"employees": [{
"id": 4,
"role": "Dealer",
"last_login": null,
"is_superuser": false,
"username": "T2Dealer2",
"is_staff": false,
"is_active": true,
"date_joined": "2022-04-06T19:32:08-07:00",
"first_name": "T2Dealer",
"last_name": "Dealer2",
"badge_num": "1234",
"email_notifications": true,
"sms_notifications": true,
"points": 0,
"image": "/media/images/profile_pics/dealer.jpg",
"supervisor": null,
"company": 2,
"groups": [
2
],
"user_permissions": []
}, ],
"supervisors": [],
"name": "Dealer",
"supervisor": null,
"group": 2,
"company": 2
}
],
"created_on": "2022-04-14T16:15:27.299700-07:00",
"updated_on": "2022-04-21T12:31:24.773872-07:00",
"name": "Casino"
}
department.roles.map(role => {
role.employees.map(employee => console.log("do something with this employee: ", employee))
role.supervisors.map(supervisor => console.log("do something with this supervisor: ", supervisor))
})CodePudding user response：
You can fix your component like this. Here is the working example https://codesandbox.io/embed/goofy-aryabhata-4bbonf?fontsize=14&hidenavigation=1&theme=dark
export default function App() {
return (
<div className="App">
{department.roles.map((role) =>
(role?.supervisors?.map((supervisor) => (
<div>{supervisor?.id}</div>
))).concat((role?.employees?.map((employee) => (
<div>{employee?.id}</div>
))))
)
}
</div>
);
}
CodePudding user response：
With the help of GitHub CoPilot (writing psuedocode comments), I was able to solve the problem using employeeTypes.map() then making sure that the Array.Prototype() has a return statement in it - as such:
export default function EmployeesByDepartmentList({ department }) {
const employeeTypes = ["supervisors", "employees"];
return (
<div className={styles.departmentSection} key={department.id}>
{department.roles.length
? department.roles.map((role) =>
// iterate over each role, with each employeeType as the key
employeeTypes.map((employeeType) => {
// return the employees
return role[employeeType].map((item) => (
<ListLinkItem
key={item.id}
id={item.id}
href={`employees/${item.id}/`}
>
<EmployeeImage
src={item.image}
alt={item.first_name item.last_name}
/>
</ListLinkItem>
));
})
)
: null}
</div>
);
}
CodePudding user response：
This should be roughly what you're looking for. Your first goal is to get all relevant people into one flat array. After that, it's easy to iterate using Array#map. Something along the lines of this:
export default function EmployeesByDepartmentList({ department }) {
const employeeTypes = ['supervisors', 'employees'];
const allPeople = employeeTypes
.map(type => department.roles.find(role => type in role)?.[type])
.filter(Boolean)
.flat();
return (
<div className={styles.departmentSection} key={department.id}>
{allPeople.map(person => (
<ListLinkItem key={person.id} id={person.id} href={`employees/${person.id}/`}>
<EmployeeImage src={person.image} alt={person.first_name person.last_name} />
<div className={styles.employeeCardInfoContainer}>
<div className={styles.listItemTitle}>
{person.first_name} {person.last_name}
</div>
<div className={styles.employeeCardRole}>{person.role}</div>
</div>
<div className={styles.employeeCardButtonContainer}>
<ArrowCircleIcon />
</div>
</ListLinkItem>
))}
</div>
);
}