React Render a table from a javascript array of objects
Question
I have a javascript array of object.
How can I render it in a HTML table?
Basically the object contains the the details of university shuttle trip from different dates and time.
Also if it helps i have retrieved this array of objects from firebase database by filtering from and to dates.
[{
"-LJty9v6G_hGvI0Q9T2y": {
"Date": "08-14-2018",
"DepartureTime": "19:44:45",
"DriverName": "Rishabh",
"NumberOfPassengers": 2,
"ReturnTime": "19:45:18",
"Students": {
"783524987": {
"Address": "1020 Westcott St",
"Date": "08-14-2018",
"DropOffTime": "19:45:05",
"Name": "nitish",
"SUID": 783524987,
"SigninTime": "15:43:35",
"SupervisorName": "Kumar Singh"
},
"873420987": {
"Address": "135 Lexington ave.",
"Date": "08-14-2018",
"DropOffTime": "19:45:11",
"Name": "kumar",
"SUID": 873420987,
"SigninTime": "15:43:53",
"SupervisorName": "Kumar Singh"
}
},
"SupervisorName": "Kumar Singh"
},
"-LJtzzL5B7-4b0jm4Kq6": {
"Date": "08-14-2018",
"DepartureTime": "19:52:56",
"DriverName": "Rishabh",
"NumberOfPassengers": 2,
"ReturnTime": "19:53:14",
"Students": {
"541984356": {
"Address": "512 Westcott St",
"Date": "08-14-2018",
"DropOffTime": "19:53:05",
"Name": "rishu",
"SUID": "541984356",
"SigninTime": "15:44:14",
"SupervisorName": "Kumar Singh"
},
"873420987": {
"Address": "135 Lexington ave.",
"Date": "08-14-2018",
"DropOffTime": "19:53:14",
"Name": "kumar",
"SUID": "873420987",
"SigninTime": "15:43:53",
"SupervisorName": "Kumar Singh"
}
},
"SupervisorName": "Kumar Singh"
},
"-LJu-IO5TMOCF9RWdYUZ": {
"Date": "08-14-2018",
"DepartureTime": "19:54:30",
"DriverName": "Rishabh",
"NumberOfPassengers": 1,
"ReturnTime": "19:54:36",
"Students": {
"719529817": {
"Address": "445 Columbus Ave",
"Date": "08-14-2018",
"DropOffTime": "19:54:36",
"Name": "dilbag",
"SUID": "719529817",
"SigninTime": "15:44:35",
"SupervisorName": "Kumar Singh"
}
},
"SupervisorName": "Kumar Singh"
},
"-LJu1EiQABaUuUHYBov8": {
"Date": "08-14-2018",
"DepartureTime": "20:01:20",
"DriverName": "Rishabh",
"NumberOfPassengers": 2,
"ReturnTime": "20:03:06",
"Students": {
"873920453": {
"Address": "1020 Westcott St",
"Date": "08-14-2018",
"DropOffTime": "20:01:34",
"Name": "diljor",
"SUID": "873920453",
"SigninTime": "16:00:54",
"SupervisorName": "Kumar Singh"
},
"874939393": {
"Address": "135 Lexington ave.",
"Date": "08-14-2018",
"DropOffTime": "20:02:50",
"Name": "nitish",
"SUID": "874939393",
"SigninTime": "16:00:32",
"SupervisorName": "Kumar Singh"
}
},
"SupervisorName": "Kumar Singh"
}
}, {
"-LK-eMcyttIyLcIpqLrf": {
"Date": "08-16-2018",
"DepartureTime": "02:55:59",
"DriverName": "Mukul",
"NumberOfPassengers": 3,
"ReturnTime": "02:56:11",
"Students": {
"619351873": {
"Address": "141 Concord Pl",
"Date": "08-15-2018",
"DropOffTime": "02:56:08",
"Name": "singhaniya",
"SUID": "619351873",
"SigninTime": "16:21:31",
"SupervisorName": "Kumar Singh"
},
"710936724": {
"Address": "318 Vincent St",
"Date": "08-15-2018",
"DropOffTime": "02:56:06",
"Name": "dilbag singh",
"SUID": "710936724",
"SigninTime": "16:18:08",
"SupervisorName": "Kumar Singh"
},
"710936728": {
"Address": "445 Burten St.",
"Date": "08-15-2018",
"DropOffTime": "02:56:03",
"Name": "kumar singh",
"SUID": "710936728",
"SigninTime": "16:01:14",
"SupervisorName": "Kumar Singh"
}
},
"SupervisorName": "Kumar Singh"
}
}]
i want the object to be transferred to a single html table in following format nested until all trips are accumulated into the table.
Trip1
Date:08/14/2018 Departure Time: 19:44:45 Return Time: 19:48:18 No. Of passengers:2 Supervisor: Kumar Singh Driver:rishabh
Passenger Details
Name SUID SignInTime Address supervisor Dropoff Time
Nitish 6489826453 19:40:18 135 Lexington Kumar Singh 19:45:20
Satish 6489826493 19:40:18 141 Lexington Kumar Singh 19:46:40
1 answers
solution1
0 ACCPTED 2018-08-18 22:28:33
Ok,.
Just fancied playing around with React, so knocked up a working snippet here.
The trick here is using Object.entries , mixed with Array.map to render all the tables.
Also just used pureCss to make the tables look a bit nicer.
const data = [{ "-LJty9v6G_hGvI0Q9T2y": { "Date": "08-14-2018", "DepartureTime": "19:44:45", "DriverName": "Rishabh", "NumberOfPassengers": 2, "ReturnTime": "19:45:18", "Students": { "783524987": { "Address": "1020 Westcott St", "Date": "08-14-2018", "DropOffTime": "19:45:05", "Name": "nitish", "SUID": 783524987, "SigninTime": "15:43:35", "SupervisorName": "Kumar Singh" }, "873420987": { "Address": "135 Lexington ave.", "Date": "08-14-2018", "DropOffTime": "19:45:11", "Name": "kumar", "SUID": 873420987, "SigninTime": "15:43:53", "SupervisorName": "Kumar Singh" } }, "SupervisorName": "Kumar Singh" }, "-LJtzzL5B7-4b0jm4Kq6": { "Date": "08-14-2018", "DepartureTime": "19:52:56", "DriverName": "Rishabh", "NumberOfPassengers": 2, "ReturnTime": "19:53:14", "Students": { "541984356": { "Address": "512 Westcott St", "Date": "08-14-2018", "DropOffTime": "19:53:05", "Name": "rishu", "SUID": "541984356", "SigninTime": "15:44:14", "SupervisorName": "Kumar Singh" }, "873420987": { "Address": "135 Lexington ave.", "Date": "08-14-2018", "DropOffTime": "19:53:14", "Name": "kumar", "SUID": "873420987", "SigninTime": "15:43:53", "SupervisorName": "Kumar Singh" } }, "SupervisorName": "Kumar Singh" }, "-LJu-IO5TMOCF9RWdYUZ": { "Date": "08-14-2018", "DepartureTime": "19:54:30", "DriverName": "Rishabh", "NumberOfPassengers": 1, "ReturnTime": "19:54:36", "Students": { "719529817": { "Address": "445 Columbus Ave", "Date": "08-14-2018", "DropOffTime": "19:54:36", "Name": "dilbag", "SUID": "719529817", "SigninTime": "15:44:35", "SupervisorName": "Kumar Singh" } }, "SupervisorName": "Kumar Singh" }, "-LJu1EiQABaUuUHYBov8": { "Date": "08-14-2018", "DepartureTime": "20:01:20", "DriverName": "Rishabh", "NumberOfPassengers": 2, "ReturnTime": "20:03:06", "Students": { "873920453": { "Address": "1020 Westcott St", "Date": "08-14-2018", "DropOffTime": "20:01:34", "Name": "diljor", "SUID": "873920453", "SigninTime": "16:00:54", "SupervisorName": "Kumar Singh" }, "874939393": { "Address": "135 Lexington ave.", "Date": "08-14-2018", "DropOffTime": "20:02:50", "Name": "nitish", "SUID": "874939393", "SigninTime": "16:00:32", "SupervisorName": "Kumar Singh" } }, "SupervisorName": "Kumar Singh" } }, { "-LK-eMcyttIyLcIpqLrf": { "Date": "08-16-2018", "DepartureTime": "02:55:59", "DriverName": "Mukul", "NumberOfPassengers": 3, "ReturnTime": "02:56:11", "Students": { "619351873": { "Address": "141 Concord Pl", "Date": "08-15-2018", "DropOffTime": "02:56:08", "Name": "singhaniya", "SUID": "619351873", "SigninTime": "16:21:31", "SupervisorName": "Kumar Singh" }, "710936724": { "Address": "318 Vincent St", "Date": "08-15-2018", "DropOffTime": "02:56:06", "Name": "dilbag singh", "SUID": "710936724", "SigninTime": "16:18:08", "SupervisorName": "Kumar Singh" }, "710936728": { "Address": "445 Burten St.", "Date": "08-15-2018", "DropOffTime": "02:56:03", "Name": "kumar singh", "SUID": "710936728", "SigninTime": "16:01:14", "SupervisorName": "Kumar Singh" } }, "SupervisorName": "Kumar Singh" } }]; function Student(props) { const [key, value] = props.student; return ( <tr> <td>{value.Name}</td> <td>{key}</td> <td>{value.SigninTime}</td> <td>{value.Address}</td> <td>{value.SupervisorName}</td> <td>{value.DropOffTime}</td> </tr> ); } function Record(props) { const [key, value] = props.rec; return ( <div className="record"> <table className="pure-table"> <thead> <tr> <th>Date</th><td>{value.Date}</td> <th>Departure<br/>Time:</th><td>{value.DepartureTime}</td> <th>Return<br/>Time</th><td>{value.ReturnTime}</td> <th>No. Of<br/>passengers</th><td>{value.NumberOfPassengers}</td> <th>Supervisor</th><td>{value.SupervisorName}</td> <th>Driver</th><td>{value.DriverName}</td> </tr> </thead> </table> <table className="pure-table pure-table-striped"> <thead> <tr><th colSpan="6">Passenger Details</th></tr> <tr> <th>Name</th> <th>SUID</th> <th>SignInTime</th> <th>Address</th> <th>Supervisor</th> <th>Dropoff Time</th> </tr> </thead> <tbody> {Object.entries(value.Students).map(s => ( <Student key={s[0]} student={s}/> ))} </tbody> </table> </div> ); } console.log(React.Fragment); ReactDOM.render( (<React.Fragment> { data.map( d => Object.entries(d).map(d => <Record key={d[0]} rec={d}/>) ) } </React.Fragment>), document.getElementById("mount") );
#mount { width: 1200px; } th { text-align: left; } .record { margin: 10px; } table { width: 100%; }
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> <div id="mount"> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Render html table in React with dynamic array of objects
How to render random objects from an array in React?
Render array of objects from Mongoose in React
Render array of objects in React
Render array of objects React
React render array of objects
Render each Objects in an array in HTML from JavaScript
Javascript table from array of objects
render table row from array: react
Render array which contains arrays of objects as data table in React
Related Tags