Load Data from Database using REST services in ReactJS or React.js
Hi Friends,
In this post I am going to show you that how you can get the data from databse using REST services and show it on the UI with the help of react JS/ReactJS/React.js.
I am assuming you must be knowing that how to create the Restful webservice to get the data from database table. In my example I have taken "Department" table from HR schema in Oracle database.
If you need any help regarding creating the REST webservice you can refer the following link :
http://www.code4fusion.com/2016/05/showing-data-from-database-table-in.html
I am assuming that you have already created the rest webservice and deployed on the server.
In my case it is deployed on local weblogic server with the following URL:
http://localhost:9001/TestRestEasy/rest/departments/
You can test your rest service using rest client in firefox as shown below:
So here I can see that I am getting the array of JSON data as the response from the restful webservice.
Now we need to consume it and show it on the UI with help of the ReactJS.
If you are beginner and need to set up the ReactJS environment then you can follow the given URL:
http://www.code4fusion.com/2016/09/setting-up-environment-for-reactjs-or.html
Once you are done with the setup you can copy and paste the dependent file in your project and then you need to modify only your jsx file.
I have done the same and copied all the file from my previous application and now going to modify the jsx file only.
So now let's go and modify the entire code in index.jsx file as follows:
import React from "react";
import ReactDOM from "react-dom";
var DepartmentGridTable = React.createClass({
getInitialState: function() {
return {departments: []};
},
componentDidMount: function() {
$.ajax({
url: this.props.dataUrl,
dataType: 'json',
success: function(data) {
this.setState({departments: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.dataUrl, status, err.toString());
}.bind(this)
});
},
render: function(){
var x = this.state.departments.map(function(d, index){
return <tr><td>{index+1}</td><td>{d.departmentId}</td><td>{d.departmentName}</td></tr>
});
return (
<div>
<h4>Department Data</h4>
<table id="mytable">
<thead>
<tr>
<td>Serial Number</td>
<td>Department Id</td>
<td>Department Name</td>
</tr>
</thead>
<tbody>
{x}
</tbody>
</table>
</div>
)
}
});
ReactDOM.render(
<DepartmentGridTable dataUrl ="http://localhost:9001/TestRestEasy/rest/departments/"/>,
document.querySelector("#container")
);
and you index.html file should look like this.
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="container"></div>
<script src="myCode.js"></script>
</body>
</html>
Now run your application by running following command
npm start
This will start your webpack dev server.
To compile the code run the following command:
node_modules\.bin\webpack
Now go to browser and open index.html file with following URL:
http://localhost:8089/index.html
You can see the following result on the UI.
In this post I am going to show you that how you can get the data from databse using REST services and show it on the UI with the help of react JS/ReactJS/React.js.
I am assuming you must be knowing that how to create the Restful webservice to get the data from database table. In my example I have taken "Department" table from HR schema in Oracle database.
If you need any help regarding creating the REST webservice you can refer the following link :
http://www.code4fusion.com/2016/05/showing-data-from-database-table-in.html
I am assuming that you have already created the rest webservice and deployed on the server.
In my case it is deployed on local weblogic server with the following URL:
http://localhost:9001/TestRestEasy/rest/departments/
You can test your rest service using rest client in firefox as shown below:
So here I can see that I am getting the array of JSON data as the response from the restful webservice.
Now we need to consume it and show it on the UI with help of the ReactJS.
If you are beginner and need to set up the ReactJS environment then you can follow the given URL:
http://www.code4fusion.com/2016/09/setting-up-environment-for-reactjs-or.html
Once you are done with the setup you can copy and paste the dependent file in your project and then you need to modify only your jsx file.
I have done the same and copied all the file from my previous application and now going to modify the jsx file only.
So now let's go and modify the entire code in index.jsx file as follows:
import React from "react";
import ReactDOM from "react-dom";
var DepartmentGridTable = React.createClass({
getInitialState: function() {
return {departments: []};
},
componentDidMount: function() {
$.ajax({
url: this.props.dataUrl,
dataType: 'json',
success: function(data) {
this.setState({departments: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.dataUrl, status, err.toString());
}.bind(this)
});
},
render: function(){
var x = this.state.departments.map(function(d, index){
return <tr><td>{index+1}</td><td>{d.departmentId}</td><td>{d.departmentName}</td></tr>
});
return (
<div>
<h4>Department Data</h4>
<table id="mytable">
<thead>
<tr>
<td>Serial Number</td>
<td>Department Id</td>
<td>Department Name</td>
</tr>
</thead>
<tbody>
{x}
</tbody>
</table>
</div>
)
}
});
ReactDOM.render(
<DepartmentGridTable dataUrl ="http://localhost:9001/TestRestEasy/rest/departments/"/>,
document.querySelector("#container")
);
and you index.html file should look like this.
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="container"></div>
<script src="myCode.js"></script>
</body>
</html>
Now run your application by running following command
npm start
This will start your webpack dev server.
To compile the code run the following command:
node_modules\.bin\webpack
Now go to browser and open index.html file with following URL:
http://localhost:8089/index.html
You can see the following result on the UI.
Comments
Post a Comment