how can loop through local json data in react js , return data within td tags?
example json file:
[ { "organize": true, "sender": "dach group", "domain": "godfrey.name", "email": "mercedes.okon@gmail.com", "folder": "business" }, { "organize": true, "sender": "bernhard , sons", "domain": "torey.net", "email": "zack45@yahoo.com", "folder": "home" }, { } console log logging data grabbing , showing data loop.
import react, { component } 'react'; import './tableheader.css'; import localdata './data'; class tableheader extends component { render() { for(var = 0; < localdata.length; i++) { var obj = localdata[i]; console.log(obj.organize + ", " + obj.sender + ", " + obj.domain + ", " + obj.email + ", " + obj.folder); } return ( <div classname="container"> <table classname="table"> <thead> <tr> <th style={{height: '50px'}}>organize</th> <th style={{height: '50px'}}>sender</th> <th style={{height: '50px'}}>domain</th> <th style={{height: '50px'}}>email</th> <th style={{height: '50px'}}>folder</th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox" name="" value="" /> </td> <td style={{backgroundcolor: 'white'}}> {obj.sender} </td> <td style={{backgroundcolor: 'white'}}>{obj.domain}</td> <td style={{backgroundcolor: 'white'}}>{obj.email}</td> <td style={{backgroundcolor: 'white'}} classname="bordercolor"> <select style={{height: '30px', width: '100%'}}> <option>travel</option> <option>shopping</option> <option>finance</option> </select> </td> </tr> </tbody> </table> </div> ); } } export default tableheader;
you should put render logic in loop well. made example data
class helloworld extends react.component { render() { const data = [ { "organize": true, "sender": "dach group", "domain": "godfrey.name", "email": "mercedes.okon@gmail.com", "folder": "business" }, { "organize": true, "sender": "bernhard , sons", "domain": "torey.net", "email": "zack45@yahoo.com", "folder": "home" }, ]; return ( <div> <table classname="table"> <thead> <tr> <th style={{height: '50px'}}>organize</th> <th style={{height: '50px'}}>sender</th> <th style={{height: '50px'}}>domain</th> <th style={{height: '50px'}}>email</th> <th style={{height: '50px'}}>folder</th> </tr> </thead> <tbody> {data.map(obj => { return ( <tr> <td> <input type="checkbox" name="" value="" /> </td> <td style={{backgroundcolor: 'white'}}> {obj.sender} </td> <td style={{backgroundcolor: 'white'}}>{obj.domain}</td> <td style={{backgroundcolor: 'white'}}>{obj.email}</td> <td style={{backgroundcolor: 'white'}} classname="bordercolor"> <select style={{height: '30px', width: '100%'}}> <option>travel</option> <option>shopping</option> <option>finance</option> </select> </td> </tr> ); })} </tbody> </table> </div> ); } } reactdom.render(<helloworld />, document.body);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
Comments
Post a Comment