Отображение свойства объекта (имя столбца) из массива объектов в строку и заголовок (столбец) Javascript

Question

В настоящее время я работаю над сопоставлением массива объекта (первоначально созданного из localStorage) с таблицей с использованием Materia-UI Table.

Я хочу отобразить все указанные столбцы с именем c в ячейке таблицы

Например, у меня есть массив (его нет в файле)

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' }]

Я хочу создать таблицу, используя эту библиотеку, или вы можете использовать теги tr или td, так как хорошо работает с React (см. рисунок ниже). Например, все имя с именем столбца date будет go до даты, а driver_name будет go до драйвера.

Answer 1

Предполагая, что вы используете 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 2

Предположим, что 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 3

Что вам нужно, так это функция Array.map (), Array.map (callback) вернет массив с возвращаемыми значениями обратного вызова, выполненного с содержимым массива в качестве параметров:

вы можете создайте функцию, которая создает html для строки, например,

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

, передавая эту функцию в качестве обратного вызова для массива. map:

const rowsHtml = (array.map(dataToTableRow))

вернет массив строк который содержит HTML для каждой строки, вы можете поместить их все в одну строку, выполнив

const tableBody = rowsHtml.join("")

, теперь у вас есть html для всех строк в таблице. Все, что вам нужно сделать, это сделать свой собственный header et c ...