如何使用reactjs在json文件中获取最后一行

问题描述 投票:0回答:1

我有一个名为myprovision.json]的json文件。

如何动态获取以下json文件中的最后一行内容并发出警报。在这种情况下,最后一行是饼干,其总数为6。

[
      { "pid" : 23101, "provision" : "Tea", "total" : 2 },
      { "pid" : 20981, "provision" : "milk", "total" : 2 },
      { "pid" : 33454, "provision" : "Biscuit", "total" : 6 }

    ]

这里是代码

<!DOCTYPE html>
<html>
   <head>

   </head>
   <body>

<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="build/browser.min.js"></script>
<script src="build/jquery.min.js"></script>


<div id="app"></div>

<script type="text/babel">
class Application extends React.Component {

  constructor(props) {
    super(props)

    this.state = {
     data:[]
    };

  }

  componentDidMount() {

    $.ajax({
      type: "POST",
      url: "http://localhost/myprovision.json",
      cache: false,
      crossdomain:true,
      success: function(data) {
         this.setState({data: data});

//alert the data of last row of the json file which is biscuit and its to total value
//alert('am the last row:' +provision);
//alert('am total value of the last row:' +total);

       }.bind(this),
       error: function(jqXHR) {
         console.log(jqXHR);
       }.bind(this)
    });

  }

  render() {
    return <div className="container">


      <div className="row">
        <h3>List of records</h3>
        <ul>

          {this.state.data.map((f, i) => 
            <li key={i}>{f.pid} - {f.provision} - {f.total} </li>)}
        </ul>
      </div>
      <p>

      </p>
    </div>;
  }
}

ReactDOM.render(<Application />, document.getElementById('app'));


</script>

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


   </body>
</html>

我有一个名为myprovision.json的json文件。如何动态获取并警告以下json文件中的最后一行内容。在这种情况下,最后一行是饼干,其总数为6。[{“ pid”:...

reactjs
1个回答
0
投票

您需要解析传入的请求并获取最后一个元素

© www.soinside.com 2019 - 2024. All rights reserved.