[英]How can I print array of object into my table using reactjs?
I just want to print array which I get from the firebase. 我只想打印从firebase获得的数组。 You can see in the image the array data.
您可以在图像中看到阵列数据。
In which I convert json object data into the array easily, but I cannot print the array data in table. 在其中我可以轻松地将json对象数据转换为数组,但无法在表中打印数组数据。 If I run console.log command on tag that time it print the console data, but not print the array value that I get from the firebase or you can say fetch from the firebase.
如果我当时在标签上运行console.log命令,它将打印控制台数据,但不打印我从firebase获得的数组值,或者可以说从firebase获取。 I want to print these data in table.
我想在表中打印这些数据。
class Contact extends React.Component { constructor() { super(); this.state = { arr: [], inner_key:[], Address:'', printabledata:[], singledata:{} }; self = this; this.printAllRecord = this.printAllRecord.bind(this); } componentWillMount() { var formdata2 = firebase.database().ref("vishal-aaede/"); formdata2.on("value", function (snap) { data = snap.val(); self.setState({arr: data}); }); } componentDidUpdate(){ var data=this.state.arr, headerArray=[]; for (var key in data){ headerArray.push(key); }console.log(headerArray); headerArray.forEach(function(val){ self.printAllRecord(data[val]) console.log(data[val].Name); } ); self.state.singledata=data[headerArray[0]] ; } printAllRecord(param,index){ self.state.printabledata.push(<tr> <td>{param.Name}</td> <td>{param.Round}</td> <td>{param.Email}</td> <td>{param.Date}</td> <td>{param.Phone}</td> <td>{param.Address}</td> <td>{param.Fresher}</td> <td>{param.Time}</td> </tr>); } render() { return ( <div> <h2>Candidate RECORD Coming Soon!!!!</h2> <p>Write Filter Code here </p> <div> <div className="row"> <div className="col-sm-2"></div> <div className="col-sm-8"> <div className = "container-fluid table-responsive"> <table className = "table table-bordered"> <thead> <tr> <th>Name</th> <th>Interview Round</th> <th>Email</th> <th>Date</th> <th>Phone Number</th> <th>Address</th> <th>Gender</th> <th>Experience</th> <th>Time</th> </tr> </thead> <tbody> {this.state.printabledata} </tbody> </table> </div> </div> <div className="col-sm-2"></div> </div> </div> </div> ) } }
You are repeating elements with the wrong approach. 您使用错误的方法来重复元素。 If you want to
loop
through array
elements then you should use array.map
methods. 如果你想
loop
通过array
元素,那么你应该使用array.map
方法。 You can find some reference here for how we print a list of elements in react . 您可以在此处找到一些有关我们如何在react中打印元素列表的参考。
You can do it using map 您可以使用地图来做
this.state.data.map(function(key,map) {
<table>
<tr></tr>
<td>{map.name}</td?
....whole code
</table>
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.