两个 JSON 文件和一个表格显示 REACT JS答案

【问题标题】：Two JSON files and one table display REACT JS两个 JSON 文件和一个表格显示 REACT JS
【发布时间】：2019-01-12 19:23:45
【问题描述】：

如何同时读取两个 JSON 文件并使用 map 将它们显示在一个表中？我需要显示来自一个 JSON 文件的前 3 列和来自另一个 JSON 文件的接下来的 2 列

状态 JSON

   [{"$class":"org.example.empty.AidShipment","pid":"143","shipment":"68","checkpoints":[],"startingpoint":"isb","destination":"china"},
{"$class":"org.example.empty.AidShipment","pid":"144","shipment":"68","checkpoints":[],"startingpoint":"isb","destination":"china"},       
{"$class":"org.example.empty.AidShipment","pid":"14","shipment":"69","checkpoints":["Received","Received"],"startingpoint":"isb","destination":"china"}]

详细信息 JSON

 [{"pid":144,"package_details":"tea","sp_id":68},
 {"pid":143,"package_details":"coffee","sp_id":68},
 {"pid":14,"package_details":"trees ","sp_id":69}]

检查点数组中最多可以有4个检查点我想显示一个带有标题的表格 1) pid 2) 包详细信息 3) Checkpoint1 4) Checkpoint2 5) Checkpoint3 6) Checkpoint4 在 react js 中使用 map 的 ship_id 68

【问题讨论】：

你得想办法把两个json合二为一
没有别的办法了吗？ @dnp1204
我认为这是最简单的方法。你为什么不想做呢？或者你可以使用带索引的地图，在索引3之后，你可以开始使用你的第二个json
我应该如何在一张地图上使用两个 json？ @dnp1204
你能用你的两个json的例子更新你的问题吗？

标签： json reactjs

【解决方案1】：

您可以使用 ES2015 组合两个 json 数组（参考这篇文章：Combine json arrays by key, javascript），然后使用 Lasse Sviland 的答案，如您所见（请运行 snnipet）：

const statusJSON = [{"$class":"org.example.empty.AidShipment","pid":"143","shipment":"68","checkpoints":[],"startingpoint":"isb","destination":"china"},
{"$class":"org.example.empty.AidShipment","pid":"144","shipment":"68","checkpoints":[],"startingpoint":"isb","destination":"china"},       
{"$class":"org.example.empty.AidShipment","pid":"14","shipment":"69","checkpoints":["Received","Received"],"startingpoint":"isb","destination":"china"}]

const pdetailsJSON = [{"pid":144,"package_details":"tea","sp_id":68},
 {"pid":143,"package_details":"coffee","sp_id":68},
 {"pid":14,"package_details":"trees ","sp_id":69}]
 
const rows = (
  statusJSON
    .map(x => Object.assign(x, pdetailsJSON.find(y => y.pid == x.pid)))
    .map(info => (
        <tr key={info.pid}>
          <td>{info.pid}</td>
          <td>{info.package_details}</td>
          <td>{info.checkpoints[0]}</td>
          <td>{info.checkpoints[1]}</td>
          <td>{info.checkpoints[2]}</td>
          <td>{info.checkpoints[3]}</td>
        </tr>
      )
    )
)

const table = (
  <table>
    <thead>
      <tr>
        <td>pid</td>
        <td> package details</td>
        <td>Checkpoint1</td>
        <td>Checkpoint2</td>
        <td>Checkpoint3</td>
        <td>Checkpoint4</td>
      </tr>
    </thead>
    <tbody>
      {rows}
    </tbody>
  </table>
)
 
 ReactDOM.render(<div>{table}</div>, document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

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

【讨论】：

【解决方案2】：

如果您的文件是静态的，您可以将它们导入到您的项目中，文件的相对路径如下：

import { status } from './status';

如果以后必须更新文件，您可以使用众多库之一来进行 ajax 调用。 React 中最受欢迎的一些是 Axios、the Fetch API 或 jQuery

要组合数组，您可以将其中一个数组映射到一个索引并与另一个数组中具有相同索引的元素连接，如下所示：

status.map((status, index) => ({...status, ...pdetails[index]}))

然后您将得到一个对象数组，其中包含两个数组中的所有属性。

要为您的表格创建行，您可以使用以下内容：

const rows = (
  status
    .map((status, index) => ({...status, ...pdetails[index]}))
    .map(info => (
        <tr>
          <td>{info.pid}</td>
          <td>{info.startingpoint}, {info.destination}</td>
          <td>{info.checkpoints[0]}</td>
          <td>{info.checkpoints[1]}</td>
          <td>{info.checkpoints[2]}</td>
          <td>{info.checkpoints[3]}</td>
        </tr>
      )
    )
)

【讨论】：