My Software Lab: Render JSON data in HTML using ReactJS

Following code is to render JSON data in HTML using ReactJS

HTML Code

JS Code

Load latest react scripts files.

Following script files were used in this example.

Add following code in to your script.

//Your JSON Data

var empdata = {

content: {

employee: [

{

name: "Joe",

Age: 30,

id : 1007

{

name: "Bill",

Age: 35,

id : 1008

}

]

}

};

//Create Class

var Employees = React.createClass({

render: function() {

//To retrieve keys from data.content

var keys = Object.keys(empdata.content);

//iterate through the keys to get the underlying values

var allEmps = keys.map((t) => empdata.content[t].map((e) => ({e.id}-{e.name}-{e.Age})));

return ({allEmps})

}

});

//Render data to HTML

ReactDOM.render(, document.getElementById("root"));

My Software Lab