我有一个对象的javascript数组。
如何在HTML表格中呈现它？
基本上，该对象包含不同日期和时间的大学班车旅行的详细信息。
如果有帮助，我可以通过过滤日期和日期来从Firebase数据库中检索此对象数组。
[{
"-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"
}
}]
我希望将对象按照以下格式嵌套到单个html表中，直到所有行程都累积到表中为止。
旅行1
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
答案 0 :(得分：0)
好吧。
只是喜欢玩React，所以在这里敲了一个片段。
这里的技巧是使用Object.entries，并与Array.map混合以呈现所有表。
也只是使用pureCss使表看起来更好。
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>