2. Algorithm
  3. javascript - REACT JS: Map over an array of objects to render in JSX - Stack Overflow

javascript - REACT JS: Map over an array of objects to render in JSX - Stack Overflow

admin2025-04-09  0

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="/[email protected]/dist/react.js"></script>
    <script src="/[email protected]/dist/react-dom.js"></script>
    <script src="/[email protected]/browser.min.js"></script>
    <script src="/[email protected]/dist/jquery.min.js"></script>
    <script src="/[email protected]/dist/remarkable.min.js"></script>
  </head>
  <body>
    <div id="content"></div>

    <script type="text/babel">


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

      username:[],
      panyID:[]
    };
  },

  ponentDidMount: 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,
            panyID: lastGist.name
            });
      }

     }.bind(this));

  },

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

  render: function() {
            return (
        <li>{this.statepanyID} 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>

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./[email protected]/dist/react.js"></script>
    <script src="https://npmcdn./[email protected]/dist/react-dom.js"></script>
    <script src="https://npmcdn./[email protected]/browser.min.js"></script>
    <script src="https://npmcdn./[email protected]/dist/jquery.min.js"></script>
    <script src="https://npmcdn./[email protected]/dist/remarkable.min.js"></script>
  </head>
  <body>
    <div id="content"></div>

    <script type="text/babel">


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

      username:[],
      panyID:[]
    };
  },

  ponentDidMount: 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,
            panyID: lastGist.name
            });
      }

     }.bind(this));

  },

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

  render: function() {
            return (
        <li>{this.state.panyID} 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>
  • javascript
  • php
  • jquery
  • json
  • reactjs
Share Improve this question edited Jun 20, 2017 at 4:37 Shubham Khatri 282k58 gold badges431 silver badges411 bronze badges asked Aug 25, 2016 at 16:24 Akshay VenugopalAkshay Venugopal 4713 gold badges9 silver badges22 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

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./[email protected]/dist/react.js"></script>
    <script src="https://npmcdn./[email protected]/dist/react-dom.js"></script>
    <script src="https://npmcdn./[email protected]/browser.min.js"></script>
    <script src="https://npmcdn./[email protected]/dist/jquery.min.js"></script>
    <script src="https://npmcdn./[email protected]/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."}]
    };
  },

  ponentDidMount: function() 
  {

  },

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

  render: function() {
            return (
            <div>
        {this.state.data.map(function(item, index){
          return    <li>{item.name} is the pany 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 ponentDidMount.

P.S. Create the state array data as an array of object as shown in the fiddle example

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./[email protected]/dist/react.js"></script>
    <script src="https://npmcdn./[email protected]/dist/react-dom.js"></script>
    <script src="https://npmcdn./[email protected]/browser.min.js"></script>
    <script src="https://npmcdn./[email protected]/dist/jquery.min.js"></script>
    <script src="https://npmcdn./[email protected]/dist/remarkable.min.js"></script>
  </head>
  <body>
    <div id="content"></div>

    <script type="text/babel">


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

      username:[],
      panyID:[]
    };
  },

  ponentDidMount: function() 
  {

    var rows = [];

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

  },

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

  render: function() {
      return (
        <div>
    {this.state.panyID.map(function(item, index){
      return    <li>{item} is the pany 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>
转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1744202321a235857.html

javascriptREACT JS Map over an array of objects to render in JSXStack Overflow

最新回复(0)