Dynamic table values from array of objects in react 17.0.01

Question

I have array of object in the below format.

[0: {Number: "11080", Cost1: "354", Cost2: "354", Cost3: "354", quantity: "2000"}]

How do show this array of objects inside a table

Here is my required table structure - https://jsfiddle.net/deepakmurthy/Lhv2sk9d/

 {
      newFilteredArray?.map((value) => {
          return(
              <tr>
              <td>Name</td>
              <td>{quantity}</td>
              <td>{Cost}</td>
              <td>xxx</td>
              <td>xxx</td>
              <td>xxx</td>
              <td>xxx</td>
              </tr>
          );
  })

3 rows of cost1, cost2 and cost3 should be generated, where in my case i am getting only one row — deepak murthy
– deepak murthy, Commented Mar 16, 2021 at 10:24
The array only has one item? Why would it output more than one row? — evolutionxbox
– evolutionxbox, Commented Mar 16, 2021 at 10:25
I need cost1 in one row and cost2 in one row and cost3 in another row — deepak murthy
– deepak murthy, Commented Mar 16, 2021 at 10:37

pilchard · Accepted Answer · 2021-03-16 11:18:20Z

1

If you're going to have more data in your array you might consider refactoring it before mapping, but as James mentioned in the comments you can simply add three rows per iteration.

The example below isolates the Cost{n} properties using destructuring, then maps the Object.keys() to return one row per key.

{
  data.map(({ Number, quantity, ...costs }) => {
    return (Object.keys(costs).map(key => (
      <tr>
        <td>{key}</td>
        <td>{quantity}</td>
        <td>{costs[key]}</td>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
      </tr>))
    )
  })
}

const App = () => {

  const data = [{ Number: "11080", Cost1: "354", Cost2: "354", Cost3: "354", quantity: "2000" }]

  return (
    <table className="table table-striped bsictable" border="1" style={{ border: '#cdcdcd solid 1px' }}>
      <thead>
        <tr align="center">
          <th rowspan="2">Name</th>
          <th colspan="2">New </th>
          <th colspan="2">Pending</th>
          <th colspan="2">Completed </th>
        </tr>
        <tr align="center">
          <th>Quantity</th>
          <th>Cost</th>
          <th>Quantity</th>
          <th>Cost</th>
          <th>Quantity</th>
          <th>Cost</th>

        </tr>
      </thead>
      <tbody>
        {
          data.map(({ Number, quantity, ...costs }) => {
            return (Object.keys(costs).map(key => (
              <tr>
                <td>{key}</td>
                <td>{quantity}</td>
                <td>{costs[key]}</td>
                <td>xxx</td>
                <td>xxx</td>
                <td>xxx</td>
                <td>xxx</td>
              </tr>))
            )
          })
        }
      </tbody>
    </table >
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

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

<div id="root"></div>

answered Mar 16, 2021 at 11:18

pilchard

13.1k5 gold badges14 silver badges27 bronze badges

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

2 Comments

deepak murthy Over a year ago

How do i refactor before mapping ? I might be having more data in the array

pilchard Over a year ago

It really just depends on the shape of your data, but probably grouped by Cost1, Cost2, etc.

Collectives™ on Stack Overflow

Dynamic table values from array of objects in react 17.0.01

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