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.
https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js
https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js
https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js
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"));
