In this article I will explain with an example, how to create a dynamic Table from JSON ReactJS.
The JSON string returned from the API
The following JSON string is returned from the ASPSnippets Test API.
[
{
"CustomerId":1,
"Name":"John Hammond",
"Country":"United States"
},
{
"CustomerId":2,
"Name":"Mudassar Khan",
"Country":"India"
},
{
"CustomerId":3,
"Name":"Suzanne Mathews",
"Country":"France"
},
{
"CustomerId":4,
"Name":"Robert Schidner",
"Country":"Russia"
}
]
Software Information
This article makes use of Visual Studio 2019, MVC 5 and .Net Framework 4.5.
Integrating ReactJS with ASP.Net MVC
Controller
The Controller consists of following Action method.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
ReactJS JSX file
Following ReactJS.jsx file consists of a CustomerTable class which extends ReactJS Component.
Constructor
Inside the Construtor, the props variable is sent to the super class so that it can be used later in the render function.
Then an Array named customers is assigned to the state.
Event Handlers
componentDidMount
This function is called when the React Component is loaded in the DOM.
Inside this function, a Cross Domain AJAX call is made to the external API using the Fetch API.
And inside the success event handler of the Fetch API, the received response is set in the customers Array of the state using the setState function.
Render function
The Render function returns an HTML Table with Header Row and dynamic rows generated using the customers array.
Inside the Render function, with the help of map function, the Table rows are dynamically generated using the customers Array.
Finally, the ReactDOM.render function, render’s the class in a HTML DIV with ID dvCustomersGrid.
class CustomerTable extends React.Component {
constructor(props) {
super(props);
this.state = {
customers: []
}
}
componentDidMount() {
fetch("https://raw.githubusercontent.com/aspsnippets/test/master/Customers.json")
.then(res => res.json())
.then(
(customers) => {
this.setState({ customers: customers });
},
(error) => {
alert(error);
}
)
}
render() {
return (<table cellPadding="0" cellSpacing="0">
<thead>
<tr>
<th>CustomerId</th>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
<tbody>
{this.state.customers.map(customer =>
<tr>
<td>{customer.CustomerId}</td>
<td>{customer.Name}</td>
<td>{customer.Country}</td>
</tr>
)}
</tbody>
</table>);
}
}
ReactDOM.render(
<CustomerTable />,
document.getElementById('dvCustomersGrid')
);
View
The View consists of an HTML DIV dvCustomersGrid inside which the generated HTML Table from the ReactJS will be displayed.
Then the following necessary JS files for ReactJS application are inherited.
1. fetch.min.js
2. react.development.js
3. react-dom.development.js
Finally, the ReactJS.jsx file is inherited.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<h4>Customers</h4>
<hr />
<div id="dvCustomersGrid"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.6.2/fetch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.development.js"></script>
<script src="@Url.Content("~/Scripts/ReactJS.jsx")"></script>
</body>
</html>
That’s it and the application is ready to run.
Screenshot
![ReactJS: Create dynamic Table from JSON]()
Downloads
