I am having touble accessing json nested data. How should I access package starting point and ending point? My code below is not working. Also how do I made the button redirect in such a way that on clicking it, it shows the rest of the package information of that shipment in a table form? I dont know how to link the button to a particular shipment. Ideas?
import React, { Component } from 'react';
import Navigation from './navigation';
import "./status.css";
export default function ViewStatusMenu (props) {
return (
<div >
<header className="App-header">
<h1 className="App-title2">Aid Tracker</h1>
<Navigation/>
</header>
<div className="base">
<h3> Shipments</h3>
<ul className ="statusmenu"> {
props.data.map(temp => {
return (
<div>
<p>Shipment ID</p>
<li className ="statuslist" temp={temp} key={temp.id}> {temp.id}</li>
<p>Shipment name</p>
<li className ="statuslist" temp={temp} key={temp.id}> {temp.name}</li>
<p>No of packages</p>
<li className ="statuslist" temp={temp} key={temp.id}> {temp.no_of_packs}</li>
<p>Starting point</p>
<li className ="statuslist" temp={temp} key={temp.id}> {temp.packages.starting_point}</li>
<p>Starting point</p>
<li className ="statuslist" temp={temp} key={temp.id}> {temp.packages.ending_point}</li>
<button>View Shipment</button>
</div>
)
}
)
}
</ul>
</div>
</div>
);
}
JSON data
[
{
"id": 112346,
"name":"XYZ",
"no_of_packs": "3",
"packages":
[
{ "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"},
{ "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"},
{ "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"},
{ "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"}
]
},
{
"id": 112346,
"name":"XYZ",
"no_of_packs": "3",
"packages":
[
{ "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"},
{ "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"},
{ "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"},
{ "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"}
]
},
{
"id": 112346,
"name":"XYZ",
"no_of_packs": "3",
"packages":
[
{ "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"},
{ "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"},
{ "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"},
{ "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"}
]
}
]
Aucun commentaire:
Enregistrer un commentaire