Two JSON files and one table display REACT JS

Question

How to read two JSON files simultaneously and display them in one table using map? I need to display first 3 columns from one JSON file and the next 2 columns from another JSON file

status 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"}]

pdetails 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}]

There can be maximum 4 checkpoints in the checkpoint array I want to display a table with headings 1) pid 2) package details 3) Checkpoint1 4) Checkpoint2 5) Checkpoint3 6) Checkpoint4 of ship_id 68 using map in react js

I think it is the simplest way. Why don't you want to do it?. Or you can use map with index, after index 3, you can start to use your second json — dnp1204, Aug 05 '18 at 19:04
Can you update your question with an example of your two json and what you want to achieve? — dnp1204, Aug 05 '18 at 19:07

score 0 · Answer 1 · answered Aug 05 '18 at 20:21

If your files are static you could import them to your project, with the relative path to the file like this:

import { status } from './status';

If the file has to be updated later, you can use one of the many libraries for doing ajax calls. Some of the most popular for React is Axios, the Fetch API or jQuery

To combine the arrays, you could map one of the arrays with an index and joint with the element in the other array with the same index like this:

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

Then you will end up with an array of objects that have all the properties from both of your arrays.

To create rows for your table, you can use something like this:

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

Kevin Hernández · Answer 2 · 2018-08-05T22:11:48.447

You can combine two json array using ES2015 (ref to this post: Combine json arrays by key, javascript) and then use the Lasse Sviland's answer as you can see here (run the snnipet, please):

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>

Two JSON files and one table display REACT JS

2 Answers2