stackoom
  简体   繁体   中英

REACT JS: Map over an array of objects to render in JSX

 原文  2016-08-25 16:24:29  1   2    javascript/ php/ jquery/ json/ reactjs

Question

I am new to React JS The question is that I need to display all the fields from my database in this piece of code. I have been able to obtain all the data as objects in the browser console and I am able to view the last piece of data in the array in the browser but have not been able to view them. Please forgive me for the wrong format in the code as I am new to this.Thanks in advance.....

Output and Codes

Browser View: Land of Toys Inc. is the name 131 is the ID

The JSON data : 

{"posts":[
  {"id":"103","name":"Atelier graphique"},
  {"id":"112","name":"Signal Gift Stores"},
  {"id":"114","name":"Australian Collectors, Co."},
  {"id":"119","name":"La Rochelle Gifts"},
  {"id":"121","name":"Baane Mini Imports"},
  {"id":"124","name":"Mini Gifts Distributors Ltd."},
  {"id":"125","name":"Havel & Zbyszek Co"},
  {"id":"128","name":"Blauer See Auto, Co."},
  {"id":"129","name":"Mini Wheels Co."},
  {"id":"131","name":"Land of Toys Inc."}
]}

This data is obtained through a PHP code written as a plugin which is in the form of a url which is given in the JS code

http://localhost/Akshay/REACT/testDataAPI.php?user=2&num=10&format=json

My Code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Tutorial</title>
    <!-- Not present in the tutorial. Just for basic styling. -->
    <link rel="stylesheet" href="css/base.css" />
    <script src="https://npmcdn.com/react@15.3.0/dist/react.js"></script>
    <script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    <script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script>
    <script src="https://npmcdn.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
  </head>
  <body>
    <div id="content"></div>

    <script type="text/babel">


var UserGist = React.createClass({
  getInitialState: function() {
    return {

      username:[],
      companyID:[]
    };
  },

  componentDidMount: function() 
  {

    var rows = [];

   this.serverRequest = $.get(this.props.source, function (result) {

      for (var i=0; i < 10; i++) 
      {
            var lastGist = result.posts[i];
            //console.log(result.posts[i]);
            this.setState({
            username: lastGist.id,
            companyID: lastGist.name
            });
      }

     }.bind(this));

  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

  render: function() {
            return (
        <li>{this.state.companyID} is the name {this.state.username} is the ID</li>
        );

  }
});


ReactDOM.render(
  <UserGist source="http://localhost/Akshay/REACT/testDataAPI.php?user=2&num=10&format=json" />,
  document.getElementById('content')
); 

    </script>
  </body>
</html>

2 answers

solution1
 3 ACCPTED  2016-08-25 16:37:50

Use map to render your data. and store the json as a javascript object in the state itself instead of two seperate arrays.

 <!-- Not present in the tutorial. Just for basic styling. -->
    <link rel="stylesheet" href="css/base.css" />
    <script src="https://npmcdn.com/react@15.3.0/dist/react.js"></script>
    <script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    <script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script>
    <script src="https://npmcdn.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
    <div id="content"></div>

    <script type="text/babel">


var UserGist = React.createClass({
  getInitialState: function() {
    return {

     data: [{"id":"103","name":"Atelier graphique"},
  {"id":"112","name":"Signal Gift Stores"},
  {"id":"114","name":"Australian Collectors, Co."},
  {"id":"119","name":"La Rochelle Gifts"},
  {"id":"121","name":"Baane Mini Imports"},
  {"id":"124","name":"Mini Gifts Distributors Ltd."},
  {"id":"125","name":"Havel & Zbyszek Co"},
  {"id":"128","name":"Blauer See Auto, Co."},
  {"id":"129","name":"Mini Wheels Co."},
  {"id":"131","name":"Land of Toys Inc."}]
    };
  },

  componentDidMount: function() 
  {

  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

  render: function() {
            return (
            <div>
        {this.state.data.map(function(item, index){
          return    <li>{item.name} is the company name, {item.id} is the ID</li>

        })}</div>
        );

  }
});


ReactDOM.render(
  <UserGist source="http://localhost/Akshay/REACT/testDataAPI.php?user=2&num=10&format=json" />,
  document.getElementById('content')
); 

    </script>
</html>

JSFIDDLE

For the fiddle example I have deleted your $.get() code in componentDidMount .

PS Create the state array data as an array of object as shown in the fiddle example

solution2
 1  2016-08-25 16:43:35

It will help you i think.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Tutorial</title>
    <!-- Not present in the tutorial. Just for basic styling. -->
    <link rel="stylesheet" href="css/base.css" />
    <script src="https://npmcdn.com/react@15.3.0/dist/react.js"></script>
    <script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    <script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script>
    <script src="https://npmcdn.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
  </head>
  <body>
    <div id="content"></div>

    <script type="text/babel">


var UserGist = React.createClass({
  getInitialState: function() {
    return {

      username:[],
      companyID:[]
    };
  },

  componentDidMount: function() 
  {

    var rows = [];

   this.serverRequest = $.get(this.props.source, function (result) {
      var username = [];
      var companyID = [];
      for (var i=0; i < 10; i++) 
      {
            var lastGist = result.posts[i];
            //console.log(result.posts[i]);
            username.push(lastGist.id);
            companyID.push(lastGist.name);
      }
      this.setState({
            username: username,
            companyID: companyID,
      });
     }.bind(this));

  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

  render: function() {
      return (
        <div>
    {this.state.companyID.map(function(item, index){
      return    <li>{item} is the company name,              {this.state.username[index]} is the ID</li>
    })}</div>
        );

  }
});


ReactDOM.render(
  <UserGist source="http://localhost/Akshay/REACT/testDataAPI.php?user=2&num=10&format=json" />,
  document.getElementById('content')
); 

    </script>
  </body>
</html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question how to render an array of JSX using .map in react Why I cannot map over this array of objects in React JS? How to map over array of dissimilar objects and return JSX without Error Render array of objects to list in JSX How to map over 2 Array in React and render to Table React render array of strings and JSX How to render/map through an array of objects in React How do I map over an array of objects in React and then conditionally render a component based on a previous value? REACT: Map over nested array of objects Render an array in React JS using map
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM