JavaScript rendering object containing arrays as table

I have an object (equipmentTable) containing arrays of values for each column in a table. I am having trouble getting this table to render properly. I think I am pretty close.

Here is the object:

{
    "manufacturer": [
        "Google",
        "Apple"
    ],
    "modelNumber": [
        "123456",
        "36987"
    ],
    "serialNumber": [
        "889977",
        "558877"
    ]
}

And what I have tried:

{equipmentTable && 
                <table className="def-tbl">
                    <thead>
                        <th>Manufacturer</th>
                        <th>Model Number</th>
                        <th>Serial Number</th>
                    </thead>
                    <tbody>
                        {console.log(equipmentTable)}
                        {equipmentTable.manufacturer.map((value) => (
                            <tr>
                                <td>
                                    {value}
                                </td>
                            </tr>
                        ))}
                        {equipmentTable.serialNumber.map((value) => (
                            <tr>
                                <td>
                                    {value}
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>}

No matter what I try, everything renders in the first column.

Any help is appreciated!

Answer

It’s a little unclear the output you want, but the main problem is that you are defining a new row on each iteration for each property. Moving the <tr> elements outside of the map() calls would be the logical step if your data was shaped per row.

But given the structure of your data it looks like you’ll want to access the columns by index in a single map.

{
  equipmentTable && (
    <table className='def-tbl'>
      <thead>
        <tr>
          <th>Manufacturer</th>
          <th>Model Number</th>
          <th>Serial Number</th>
        </tr>
      </thead>
      <tbody>
        {equipmentTable.manufacturer.map((_, i) => (
          <tr key={`row_${i}`}>
            <td>{equipmentTable.manufacturer[i]}</td>
            <td>{equipmentTable.modelNumber[i]}</td>
            <td>{equipmentTable.serialNumber[i]}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Or, to make it dynamic you could use nested map() calls on the Object.keys() and Object.values() of your data for the headers and body accordingly.

{
  equipmentTable && (
    <table className='def-tbl'>
      <thead>
        <tr>
          {Object.keys(equipmentTable).map((header) => (
            <th key={header}>{header}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {Object.values(equipmentTable)[0].map((_, i) => (
          <tr key={`row${i}`}>
            {Object.values(equipmentTable).map((values, j) => (
              <td key={`row${i}_col${j}`}>{values[i]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}