Mapping table data 2D array

Question

I have a slightly strange problem that i cant solve. I have to render a table using react - however my data structure is such that i need the name from the first level to be the table headings - I then need to map the data associated to that heading into the correct cells in the table.

Here is my data

[{
    "cell_id": 1,
    "step_data": [{
      "width": 1920,
      "name": "bruce",
    }, {
      "width": 2236,
      "name": "ben",

      }],
        "cell_name": " boys names"
      },
{
        "cell_id": 2,
        "step_data": [{
          "width": 1920,
          "name": "grace",
        }, {
          "width": 2236,
          "name": "megan",

        }],
        "cell_name": "girls names"
      }

To map the table headings i do this which dynamically renders the headings however I cant seem to put the data under the correct headings as they all go on the same row.

Any ideas how i do this?

My desired task is to have a table with two headings boys names and girls names - I need the step_data from boys names to be rows under the boys name heading and the step data from girls names to be under the girls names heading

<table className="table">
    <tbody>
      <tr>
        {this.props.data.map((item, key) => <th key={key}>{item.cell_name}</th>
        )}

      </tr>
      {this.props.data.map(data => data.map((z, key) => <td key={key}>{z.name}</td>))}

      <tr>

      </tr>

    </tbody>
  </table>

Roy Wang · Accepted Answer · 2018-04-20 17:20:21Z

1

{[
  ...Array( // get the number of rows you need to create
    Math.max(...this.props.data.map(({ step_data }) => step_data.length))
  ).keys()
].map(i => (
  <tr key={i}>
    {this.props.data.map(({ step_data, cell_name }) => (
      <td key={cell_name}>{(step_data[i] || {}).name}</td>
    ))}
  </tr>
))}

answered Apr 20, 2018 at 17:20

Roy Wang

11.3k2 gold badges26 silver badges44 bronze badges

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

2 Comments

marcuspetty Over a year ago

Could you please explain the syntax <td key={cell_name}>{(step_data[i] || {}).name}</td> Not sure I fully understand what is going on?

Roy Wang Over a year ago

It creates a td with the value step_data[i].name, and prevents crash if step_data[i] is undefined (this happens if one array is longer than the other).

Collectives™ on Stack Overflow

Mapping table data 2D array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related