react display array of objects in a table

Question

I have a array of object, i need to show them in a table,

I am stuck at how to display adjustedAmount, paidAmount and cost type?

Here is the obj i have:

const datdfa = [
{
  index: 500,
  schudule_number: "11010",
  scheduleAvailableBudget: 1598000,
  budgetedqty: 2000,
  paidQty: 3,
  availableBalance: 1595633,
  adjustedAmount: [{ "Labour Cost": 3, "Material Cost": 0 }],
  paidAmount: [{ "Labour Cost": 1059, "Material Cost": 1059 }]
},
{
  index: 2016,
  schudule_number: "11020",
  scheduleAvailableBudget: 21600,
  budgetedqty: 12,
  paidQty: 10,
  availableBalance: 3663,
  adjustedAmount: [{}],
  paidAmount: [{ "Labour Cost": 468, "Material Cost": 468 }]
}
];

And here is the table to display

{datdfa?.map((s, d) => {
    let uniqueWSID = `row_${d}`;
      return (
          ...
          <td valign="middle">
              {
                  (s.adjustedAmount)?.map((ad) => {
                      return(
                          <td>{ad.key}</td> // this does not shows up
                      );
                  })
              }
          </td>  

and i have created a sandbox link - here

What am i making wrong / how to display it in the table?

Answer 1

I have modified your sandbox, here is the solution (https://codesandbox.io/s/cocky-mendeleev-7nrke?file=/src/App.js ):

const datdfa = [
{
index: 500,
schudule_number: "11010",
scheduleAvailableBudget: 1598000,
budgetedqty: 2000,
paidQty: 3,
availableBalance: 1595633,
adjustedAmount: [{ LabourCost: 3, MaterialCost: 0 }],
paidAmount: [{ LabourCost: 1059, MaterialCost: 1059 }]
},
{
index: 2016,
schudule_number: "11020",
scheduleAvailableBudget: 21600,
budgetedqty: 12,
paidQty: 10,
availableBalance: 3663,
adjustedAmount: [{}],
paidAmount: [{ LabourCost: 468, MaterialCost: 468 }]
}
];

export default function App() {
  return (
 <div>
  <div className="App">
    <h1>Hello CodeSandbox</h1>
    <h2>Start editing to see some magic happen!</h2>
  </div>
  <div>
    <table>
      <thead>
        <tr>
          <th>index</th>
          <th>schudule_number</th>
          <th>scheduleAvailableBudget</th>
          <th>budgetedqty</th>
          <th>paidQty</th>
          <th>availableBalance</th>
          <th>adjustedAmount</th>
          <th>paidAmount</th>
        </tr>
      </thead>

      <tbody>
        {datdfa.map((column) => (
          <tr>
            <td>{column.index}</td>
            <td>{column.schudule_number}</td>
            <td>{column.scheduleAvailableBudget}</td>
            <td>{column.budgetedqty}</td>
            <td>{column.paidQty}</td>
            <td>{column.availableBalance}</td>
            <td>
              {column.adjustedAmount.map((amount) => (
                <span>
                  <span>{"LabourCost " + amount.LabourCost}</span>
                  <span>{"Material Cost " + amount.MaterialCost}</span>
                </span>
              ))}
            </td>
            <td>
              {column.paidAmount.map((amount) => (
                <span>
                  <span>{"LabourCost " + amount.LabourCost}</span>
                  <span>{"Material Cost " + amount.MaterialCost}</span>
                </span>
              ))}
            </td>
          </tr>
        ))}
      </tbody>
     </table>
     </div>
    </div>
  );
}

Answer 2

Your sandbox is an empty. Anyway I think that might be a problem with part where you map and show, try that:

  {s.adjustedAmount?.map((ad) => (
    <td>{ad.key}</td> 
  ))}

@edit Here is sandbox

Basically you shouldn't create array elements like that, usually it is better to have objects with {name: "someName", value: 1} for example so then you can just map through name and value of each one. That's how I made it in the sandbox. It is easier to map through all values. In this example you have only 2 elements but if you would have like 1000 or more you will have to hardcode each one... which will waste so much time.