How to arrange nested array of object data for react table component display

Question

I have this reusable component adminTable

const AdminTable=(props)=>{
    const classes = useStyles();
  console.log(props);
    return(<TableContainer component={Paper}>
        <Typography className="typo-table" variant="h5">{props.heading}</Typography>
        <Table className={classes.table} aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell className="table-head">S/N</TableCell>
              {props.tableHeading.map(item=>(<TableCell className="table-head" key={item} align="left"> {item}</TableCell>))}
              <TableCell className="table-head" align="left">Options</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
          {props.displayedResult.map((row, i) => (
              <TableRow key={row.id}>
                <TableCell component="th" scope="row">
                  {i+1}
                </TableCell>
                {props.tableDataKey.map((cell)=>(<TableCell key={cell} align="left">{row[cell]}</TableCell>))}
                <TableCell align="left"><CustomNavlinkAction to={"/admin/applicant/"+row.userId} /></TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>)

}

export default AdminTable;

And the component is meant to be used in the component AdminPageWrapper below

const displayedResult = [
  {
    createdAt: 1584972020777,
    updatedAt: 1584972020777,
    id: 1,
    userId: 1,
    comment: "Let's archive this",
    createdBy: 2,
    info: {
      createdAt: 1584962612534,
      updatedAt: 1584972020767,
      id: 1,
      fullName: 'John Doe',
      phone: '+2348079821739',
      location: 'Ilorin',
      age: 23,
      email: '[email protected]',
      gender: 'Male',
      userId: 1,
      processed: true
    }
  }
];
const tableHeading = ["Name", "Email", "Phone", "Comments", "Added by", "Date"];

const tableDataKey = ['info.fullname', 'info.email', 'info.phone', 'comment', 'createdBy', 'createdAt' ];

<AdminTable heading={heading} displayedResult={displayedResult} tableHeading={tableHeading} tableDataKey={tableDataKey} />

Below is the result of my output in the component

How do I refactor my code to ensure that name, email and phone show?

keikai · Accepted Answer · 2020-03-26 05:41:22Z

A. If there are no duplicated keys inside the sub object

You can make the displayed object directly to flat

const displayData = displayedResult.map(x => {
  const y = {...x, ...x.info};
  delete y.info;
  return y;
})

const displayedResult = [
  {
    createdAt: 1584972020777,
    updatedAt: 1584972020777,
    id: 1,
    userId: 1,
    comment: "Let's archive this",
    createdBy: 2,
    info: {
      createdAt: 1584962612534,
      updatedAt: 1584972020767,
      id: 1,
      fullName: 'John Doe',
      phone: '+2348079821739',
      location: 'Ilorin',
      age: 23,
      email: '[email protected]',
      gender: 'Male',
      userId: 1,
      processed: true
    }
  }
];
const displayData = displayedResult.map(x => {
  const y = {...x, ...x.info};
  delete y.info;
  return y;
})
console.log(displayData[0])

Then use them the same way as other normal attributes

const tableDataKey = ['fullname', 'email', 'phone', 'comment', 'createdBy', 'createdAt' ];

B. If there are duplicated keys (your current situation)

You can optionally replace them with contacted name to avoid duplicate:

Object.keys(x.info).forEach(key => x.info['info.' + key] = x.info[key])

const displayedResult = [
  {
    createdAt: 1584972020777,
    updatedAt: 1584972020777,
    id: 1,
    userId: 1,
    comment: "Let's archive this",
    createdBy: 2,
    info: {
      createdAt: 1584962612534,
      updatedAt: 1584972020767,
      id: 1,
      fullName: 'John Doe',
      phone: '+2348079821739',
      location: 'Ilorin',
      age: 23,
      email: '[email protected]',
      gender: 'Male',
      userId: 1,
      processed: true
    }
  }
];
const displayData = displayedResult.map(x => {
  Object.keys(x.info).forEach(key => x.info['info.' + key] = x.info[key])
  const y = {...x, ...x.info};
  delete y.info;
  return y;
})
console.log(displayData[0])

const tableDataKey = ['info.fullname', 'info.email', 'info.phone', 'comment', 'createdBy', 'createdAt' ];

Thank you for your help. I have also used the same procedure in implementing other similar cases

Collectives™ on Stack Overflow

How to arrange nested array of object data for react table component display

1 Answer 1

A. If there are no duplicated keys inside the sub object

B. If there are duplicated keys (your current situation)

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

A. If there are no duplicated keys inside the sub object

B. If there are duplicated keys (your current situation)

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related