How to convert a <table> from column into row when mapping a JSON object using React?

Question

In React 16.11.0, I used map() function for a simple JSON object to access the values of each elements. When ReactDOM renders the content, the table will display a list of values in column for each elements of data:

const data = [
  { Name: "Jame",   Email: "[email protected]",    ID: "1568132456", City: "New York" },
  { Name: "Harris", Email: "[email protected]",  ID: "7666487798", City: "Chicago" },
  { Name: "Daisy",  Email: "[email protected]", ID: "2177897432", City: "Los Angeles" },
  // etc...
];

const Table = ({data}) => {
  const head = (
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>ID</th>
      <th>City</th>
    </tr>
  );

  const body = data.map(element => (
    <tr key={element.ID}>
      <td>{element.Name}</td>
      <td>{element.Email}</td>
      <td>{element.ID}</td>
      <td>{element.City}</td>
    </tr>
  ));

  return (
    <table>
      <thead>{head}</thead>
      <tbody>{body}</tbody>
    </table>
  );
};

ReactDOM.render(<Table data={data}/>, document.querySelector('div'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div></div>

The table output will display these values below:

Instead, what I want is the values will be displayed in row for each elements like this table below:

How to convert the table in this case?

Just like you rendered this, you can map over the data like you do and make a const called rowNames, one called emailAdresses, ids and cities for example and just fill them the same way you're filling them now (all data.Name in rowNames, all data.Email in emailaddresses etc) and then render them row by row. Seems pretty straightforward, unless I'm missing something here? — Daan Proost
– Daan Proost, Commented Nov 20, 2019 at 15:22

Apolo · Accepted Answer · 2019-11-20 15:32:57Z

2

create rules for each row and loop on these rows, then on your data:

const data = [
  { Name: "Jame",   Email: '[email protected]',   ID: "1568132456", City: "New York" },
  { Name: "Harris", Email: '[email protected]', ID: "7666487798", City: "Chicago" },
  { Name: "Daisy",  Email: '[email protected]',  ID: "2177897432", City: "Los Angeles" },
  // etc...
];

const rows = [
  { name: 'Name', render: (item) => item.Name },
  { name: 'Email', render: (item) => item.Email },
  { name: 'ID', render: (item) => item.ID },
  { name: 'City', render: (item) => item.City },
];

const body = rows.map(({ name, render }) => (
  <tr key={name}>
    <td>{name}</td>
    {data.map((item, i) => (
      <td key={i}>{render(item)}</td>
    ))}
  </tr>
));

const content = (
  <div>
    <table>
      <tbody>{body}</tbody>
    </table>
  </div>
);

answered Nov 20, 2019 at 15:32

Apolo

4,0512 gold badges26 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sagi Rika · Accepted Answer · 2019-11-20 15:27:14Z

0

Try this code:

Object.keys(data[0]).forEach(key => (
  <tr key={key}>
    <td>{key}</td>
    {data
      .map(element => element[key])
      .map(value => (
        <td key={value}>{value}</td>
      ))}
  </tr>
));

You probably want to find better keys for the second map, the one that generates td.

edited Nov 20, 2019 at 15:27

answered Nov 20, 2019 at 15:16

Sagi Rika

2,9993 gold badges17 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to convert a <table> from column into row when mapping a JSON object using React?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related