时间戳

首页 > 解决方案 > react 17.0.01 中对象数组的动态表值

javascript - react 17.0.01 中对象数组的动态表值

问题描述

我有以下格式的对象数组。

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

如何在表格中显示此对象数组

这是我需要的表结构 - 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>
          );
  })

标签： javascriptreactjs

解决方案

如果您要在数组中包含更多数据，您可能会考虑在映射之前对其进行重构，但正如 James 在评论中提到的，您可以在每次迭代中简单地添加三行。

下面的示例使用解构Cost{n}来隔离属性，然后将 映射为每个键返回一行。Object.keys()

{
  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>

推荐阅读