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/[email protected]/dist/react.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script>
<script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/jquery.min.js"></script>
<script src="https://npmcdn.com/[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:[],
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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
