mercredi 25 juillet 2018

JSON nested and React JS

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