将对象属性（列名）从对象数组映射到行和标题（列）Javascript

Question

我目前正在使用 Materia-UI 表将一个对象数组（最初从 localStorage 创建）映射到一个表。

我想在表格单元格中映射所有特定的列名

例如，我有一个数组（它不在文件中）

var array = [{ date: '2019-02-11', bus_name: 'Thomas #1', driver_name: 'Sam', time_start: '9AM', time_end: '5PM' }, 
{ date: '2012-02-11', bus_name: 'Thomas #2', driver_name: 'Samantha', time_start: '8AM', time_end: '4PM'}, 
{ date: '2011-02-02', bus_name: 'Thomas #3', driver_name: 'Peter', time_start: '12PM', time_end: '7PM' }, { date: '2010-06-04', bus_name: 'Thomas #4', driver_name: 'Eddie', time_start: '11AM', time_end: '6PM' }, { date: '2017-02-11', bus_name: 'Thomas #5', driver_name: 'Raul', time_start: '4AM', time_end: '1PM' }, 
{ date: '2014-04-03', bus_name: 'Thomas #6', driver_name: 'Jessie', time_start: '5AM', time_end: '2PM' }]

我想使用该库创建一个表，或者您可以使用 th tr 或 td 标签，因为它适用于 React（下图）例如，列名称为 date 的所有名称都将转到 Date，和driver_name 将转到驱动程序。

Answer 1

假设array 是你定义的数组。

<table>
  <thead>
    <tr>
      <th>Date</th>
      <th>Driver</th>
    </tr>
  </thead>
  <tbody>
    {array.map((element, index) => {
        return (
          <tr key={index}>
           <td>{element.date}</td>
           <td>{element.driver_name}</td>
          </tr>
        )
    })}
  </tbody>
</table>

我认为这应该可行ツ

Answer 2

假设您正在使用带有卡片组件的 Material-UI（您也可以跳过卡片组件），您可以使用如下代码：

import React, { useState } from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/styles';
import {
  Card,
  CardActions,
  CardContent,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  TablePagination,
  Toolbar,
  Typography,
} from '@material-ui/core';

var rides = [{ date: '2019-02-11', bus_name: 'Thomas #1', driver_name: 'Sam', time_start: '9AM', time_end: '5PM' },
{ date: '2012-02-11', bus_name: 'Thomas #2', driver_name: 'Samantha', time_start: '8AM', time_end: '4PM'},
{ date: '2011-02-02', bus_name: 'Thomas #3', driver_name: 'Peter', time_start: '12PM', time_end: '7PM' }, { date: '2010-06-04', bus_name: 'Thomas #4', driver_name: 'Eddie', time_start: '11AM', time_end: '6PM' }, { date: '2017-02-11', bus_name: 'Thomas #5', driver_name: 'Raul', time_start: '4AM', time_end: '1PM' },
{ date: '2014-04-03', bus_name: 'Thomas #6', driver_name: 'Jessie', time_start: '5AM', time_end: '2PM' }];

const useStyles = makeStyles(theme => ({
  root: {},
  content: {
    padding: theme.spacing(2)
  },
  nameContainer: {
    display: 'flex',
    alignItems: 'center'
  },
  avatar: {
    marginRight: theme.spacing(2)
  },
  actions: {
    justifyContent: 'flex-end'
  },

  title: {
    flex: '1 1 100%',
  },
  table: {
    '& .MuiTableCell-root': {
      padding: 4,
    },
  },
}));

const RideTable = props => {
  //const { rides, ...rest } = props;
  const { className, ...rest } = props;

  const classes = useStyles();

  const [rowsPerPage, setRowsPerPage] = useState(10);
  const [page, setPage] = useState(0);


  const handlePageChange = (event, page) => {
    setPage(page);
  };

  const handleRowsPerPageChange = event => {
    setRowsPerPage(event.target.value);
  };

  return (
    <Card
      {...rest}
      className={clsx(classes.root, className)}
    >
      <CardContent className={classes.content}>
        <Toolbar>
          <Typography
            className={classes.title}
            variant="h6"
            id="tableTitle"
          >
            Rides
          </Typography>
        </Toolbar>
        <Table className={classes.table}>
          <TableHead>
            <TableRow>
              <TableCell>Date</TableCell>
              <TableCell>Driver</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rides.map((ride, index) => (
              <TableRow
                className={classes.tableRow}
                hover
                key={'ride-' + index}
              >
                <TableCell>{ride.date}</TableCell>
                <TableCell>{ride.driver_name}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
      <CardActions className={classes.actions}>
        <TablePagination
          component="div"
          count={rides.length}
          onChangePage={handlePageChange}
          onChangeRowsPerPage={handleRowsPerPageChange}
          page={page}
          rowsPerPage={rowsPerPage}
          rowsPerPageOptions={[5, 10, 25]}
        />
      </CardActions>
    </Card>
  );
};


export default RideTable;

Answer 3

您正在寻找的是 Array.map() 函数， Array.map(callback) 将返回一个数组，其中以数组内容作为参数执行的回调的返回值：

你可以创建一个函数来为一行创建 html 像

function dataToTableRow(data){
    return `<tr><td>${data.date}</td><td>${data.driver_name}</td></tr>`
}

将此函数作为对 array.map 的回调：

const rowsHtml = (array.map(dataToTableRow))

将返回一个字符串数组，其中包含每一行的 HTML，您可以通过这样做将它们全部放在一个字符串中

const tableBody = rowsHtml.join("")

现在您已经拥有了 tableBody 中所有行的 html，您需要做的就是制作自己的标题等...