Published on: 17 August, 2016

How to populate JSON data using ReactJS framework.

Posted by andy | 330 views 0 likes 0 favourites 0 comments
Tumblr Digg Google Plus

In this tutorial you will learn how to populate JSON data using React JS framework. The first step is to import the required react js framework scripts. We source the scripts from the CDN directly.

<script src="http://fb.me/react-0.13.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.13.1.js"></script>

The JSXTransformer script is used if we want to return in HTML Tag format in React, so this is optional. I would recommend to use this as it will be easier to read.

Here is the simple example of code on how to populate JSON data into a table rows using React JS framework.

<div id="divContent"></div>
<script type="text/jsx">
	var SampleReact = React.createClass({
		render: function(){
			var data = 	[
				{ 
					"name": "James Angus", 
					"age" : "22", 
					"job": "Dentist" 
				},
				{ 
					"name": "Milan Howen", 
					"age" : "36", 
					"job": "Truck Driver" 
				}	
			];

			var rows = data.map(function(row){
			 return <tr>
					 <td>{row.name}</td>
					 <td>{row.age}</td>
					 <td>{row.job}</td>
				 </tr>
			 });
			 
			return  <table>
						<thead>
						<th>Name</th>
						<th>Age</th>
						<th>Job</th>
						</thead>
						{rows}
					</table>
						
		}
	});
	
	React.render(React.createElement(SampleReact), document.getElementById("divContent"));
</script>

Notes

When returning the final render value, it has to be wrapped at least in one html tag. So if you just return {rows}, it will never work and you will get an error. Either you can return it as :

<div>
{rows}
</div>

Also when return the html content, it needs to be returned as one html tag with enclosed tag per line. Otherwise you will get an error as well.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.