Thursday, January 11, 2018

Render JSON data in HTML using ReactJS

Following code is to render JSON data in HTML using ReactJS

HTML Code

<div id="root"></div>

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"));



No comments:

Post a Comment