JSON嵌套和React JS

时间：2018-07-25 10:51:37

标签： json reactjs web nested

我无法访问json嵌套数据。我应该如何访问包裹的起点和终点？我下面的代码无法正常工作。另外，如何使按钮重定向，使其在单击时以表格形式显示该货件的其余包裹信息？我不知道如何将按钮链接到特定的货件。想法？

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数据

      [
        {
               "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"}

          ]
        }
    ]

1 个答案:

答案 0 :(得分：0)

这应该给你一个线索 使用了您的数据，目前仅显示ID，但可以显示所有数据。 要进行重定向，您需要创建其他路线和组件以呈现新页面

const 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"
        }

      ]
  }
];



class App extends React.Component {
  redirectToItem = (item) => {
    // your redirect code goes here
  };

  renderItem = (item, index) => < li onClick = {
      () => this.redirectToItem(item)
    } >
    <
    span > {
      item.id
    } < /span> <
    /li>;

  render() {
    return <div >
      <
      h3 > Shipments < /h3> <
      ul className = "statusmenu" > {
        data.map(this.renderItem)
      } <
      /ul> <
      /div>
  }
}

ReactDOM.render( < App / > , document.getElementById('root'));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

相关问题
最新问题