Javascript render object of arrays as table

Question

I have a JavaScript object in which I am trying to render as a table, though I am unable to figure out how to access each individual array.

Here is a sample of the object (defLogTable):

{
    "headings": [
        "Item",
        "Equip Tag",
        "Ref#",
        "Description",
        "Corrective Action Taken or Date Completed"
    ],
    "values": [
        [
            1,
            "RTU-1",
            1,
            "This did not work",
            "Make it Work"
        ],
        [
            2,
            "EF-1",
            2,
            "This also didn't work",
            "Make this one work too"
        ]
    ]
}

Each 'values' array corresponds to a row in the table.

And What I have tried:

<table className="def-tbl">
                    <tbody>
                        {console.log(defLogTable)}
                        {defLogTable.headings.map(heading => (
                            <th>{heading}</th>
                        ))}
                    </tbody>
                </table>

Error: TypeError: Cannot read properties of undefined (reading 'headings')

Any help is appreciated!!

Are you using some kind of JavaScript framework here? If not, none of this will work (you can't put curly braces in ordinary HTML and have anything magical happen). — David P. Caldwell
– David P. Caldwell, Commented Jul 20, 2022 at 19:36

Emiel Zuurbier · Accepted Answer · 2022-07-20 19:44:38Z

1

Use a nested map to render each row in the values property.

<table className="def-tbl">
  <thead>
    <tr>
      {defLogTable.headings.map(heading => (
        <th>{heading}</th>
      ))}
    </tr>
  </thead>

  <tbody>
    {defLogTable.values.map(row => (
      <tr>
        {row.map(cell => (
          <td>{cell}</td>
        ))}
      </tr>
    ))}
  </tbody>
</table>

answered Jul 20, 2022 at 19:44

Emiel Zuurbier

21.2k3 gold badges25 silver badges36 bronze badges

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

3 Comments

Jordan Over a year ago

This is what I currently have, I receive the error TypeError: Cannot read properties of undefined (reading 'headings')

Emiel Zuurbier Over a year ago

So your defLogTable value is undefined. Probably because the initial state of defLogTable is not the object that you show in your question, but undefined. Just check if defLogTable is undefined before rendering the table.

Jordan Over a year ago

I never thought that would be the case since I was able to console.log() it, but adding a simple 'defLogTable &&' worked like a charm, thank you sir

Collectives™ on Stack Overflow

Javascript render object of arrays as table

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related