[英]Populate data from an array into an html table
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<body>
<!-- begin template -->
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Name</th>
<th>Relevant Tag Info</th>
<th>Rating</th>
<th>Track</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>James Bond</td>
<td>Relevant Tag Info</td>
<td>4 Stars</td>
<td class="center">Track</td>
<td class="center">Edit</td>
</tr>
<tr class="odd gradeX">
<td>James Bond</td>
<td>Relevant Tag Info</td>
<td>4 Stars</td>
<td class="center">Track</td>
<td class="center">Edit</td>
</tr>
<tr class="odd gradeX">
<td>James Bond</td>
<td>Relevant Tag Info</td>
<td>4 Stars</td>
<td class="center">Track</td>
<td class="center">Edit</td>
</tr>
<tr class="odd gradeX">
<td>James Bond</td>
<td>Relevant Tag Info</td>
<td>4 Stars</td>
<td class="center">Track</td>
<td class="center">Edit</td>
</tr>
<tr class="odd gradeX">
<td>James Bond</td>
<td>Relevant Tag Info</td>
<td>4 Stars</td>
<td class="center">Track</td>
<td class="center">Edit</td>
</tr>
<tr class="odd gradeX">
<td>James Bond</td>
<td>Relevant Tag Info</td>
<td>4 Stars</td>
<td class="center">Track</td>
<td class="center">Edit</td>
</tr>
<tr class="odd gradeX">
<td>James Bond</td>
<td>Relevant Tag Info</td>
<td>4 Stars</td>
<td class="center">Track</td>
<td class="center">Edit</td>
</tr>
<tr class="odd gradeX">
<td>James Bond</td>
<td>Relevant Tag Info</td>
<td>4 Stars</td>
<td class="center">Track</td>
<td class="center">Edit</td>
</tr>
<tr class="odd gradeX">
<td>James Bond</td>
<td>Relevant Tag Info</td>
<td>4 Stars</td>
<td class="center">Track</td>
<td class="center">Edit</td>
</tr>
<tr class="odd gradeX">
<td>James Bond</td>
<td>Relevant Tag Info</td>
<td>4 Stars</td>
<td class="center">Track</td>
<td class="center">Edit</td>
</tr>
<tr class="odd gradeX">
<td>James Bond</td>
<td>Relevant Tag Info</td>
<td>4 Stars</td>
<td class="center">Track</td>
<td class="center">Edit</td>
</tr>
<tr class="odd gradeX">
<td>James Bond</td>
<td>Relevant Tag Info</td>
<td>4 Stars</td>
<td class="center">Track</td>
<td class="center">Edit</td>
</tr>
<tr class="odd gradeX">
<td>James Bond</td>
<td>Relevant Tag Info</td>
<td>4 Stars</td>
<td class="center">Track</td>
<td class="center">Edit</td>
</tr>
<tr class="odd gradeX">
<td>James Bond</td>
<td>Relevant Tag Info</td>
<td>4 Stars</td>
<td class="center">Track</td>
<td class="center">Edit</td>
</tr>
</tbody>
</table>
</div>
</body>
I am trying to grab data from 我正在尝试从中获取数据
var dResponse = [{"user_id":"1","user_firstname":"Mark","user_lastname":"Woo","user_latitude":"37.7902","user_longitude":"-122.458"}, {"user_id":"2","user_firstname":"Hualong","user_lastname":"Chen","user_latitude":"37.7285","user_longitude":"-122.438"},{"user_id":"3","user_firstname":"TFirst","user_lastname":"TLast","user_latitude":"37.7401","user_longitude":"-122.492"},{"user_id":"4","user_firstname":"Zishan","user_lastname":"Budhwani","user_latitude":"37.7298","user_longitude":"-122.47"},{"user_id":"5","user_firstname":"ibian","user_lastname":"hodgson","user_latitude":"37.8014","user_longitude":"-122.427"},{"user_id":"6","user_firstname":"Amos","user_lastname":"Munoz","user_latitude":"37.7367","user_longitude":"-122.439"},{"user_id":"7","user_firstname":"Brennan","user_lastname":"Ramos","user_latitude":"37.7624","user_longitude":"-122.435"},{"user_id":"8","user_firstname":"Cole","user_lastname":"Lott","user_latitude":"37.7607","user_longitude":"-122.462"},{"user_id":"9","user_firstname":"Slade","user_lastname":"Strickland","user_latitude":"37.796","user_longitude":"-122.451"},{"user_id":"10","user_firstname":"Isaiah","user_lastname":"Gibbs","user_latitude":"37.7536","user_longitude":"-122.464"}];
and assign each piece of data into its correct category. 并将每个数据分配到正确的类别中。
Example: User_id:1 should create the first user with firstname,last name, lat, and long. 示例:User_id:1应该使用名字,姓氏,纬度和经度创建第一个用户。
Will look like: 看起来像:
First Name: Last Name: Latitude: Longitude: 名:姓:纬度:经度:
Mark Woo 37.7902 -122.458 吴37.7902 -122.458
Well this works, i hope this is what you're looking for. 好吧,这行得通,我希望这是您想要的。
The main point of this answer is for you to take note of the for loop
to understand how you access the object data. 该答案的重点是让您注意
for loop
以了解如何访问对象数据。 I'm sure you can improve on the way you handle the data after that. 我相信您之后可以改善处理数据的方式。
function Table(){ var dResponse = [ {"user_id":"1","user_firstname":"Mark","user_lastname":"Woo","user_latitude":"37.7902","user_longitude":"-122.458"}, {"user_id":"2","user_firstname":"Hualong","user_lastname":"Chen","user_latitude":"37.7285","user_longitude":"-122.438"}, {"user_id":"3","user_firstname":"TFirst","user_lastname":"TLast","user_latitude":"37.7401","user_longitude":"-122.492"}, {"user_id":"4","user_firstname":"Zishan","user_lastname":"Budhwani","user_latitude":"37.7298","user_longitude":"-122.47"}, {"user_id":"5","user_firstname":"ibian","user_lastname":"hodgson","user_latitude":"37.8014","user_longitude":"-122.427"}, {"user_id":"6","user_firstname":"Amos","user_lastname":"Munoz","user_latitude":"37.7367","user_longitude":"-122.439"}, {"user_id":"7","user_firstname":"Brennan","user_lastname":"Ramos","user_latitude":"37.7624","user_longitude":"-122.435"}, {"user_id":"8","user_firstname":"Cole","user_lastname":"Lott","user_latitude":"37.7607","user_longitude":"-122.462"}, {"user_id":"9","user_firstname":"Slade","user_lastname":"Strickland","user_latitude":"37.796","user_longitude":"-122.451"}, {"user_id":"10","user_firstname":"Isaiah","user_lastname":"Gibbs","user_latitude":"37.7536","user_longitude":"-122.464"} ]; // Target the Table you want to insert the Data to var results=document.getElementById('Results'); results.innerHTML += "<tr><td>User ID</td><td>First Name</td><td>Last Name</td><td>latitude</td><td>longitude</td></tr>"; for(var obj in dResponse){ //Loop through the object to get each objects data results.innerHTML += "<tr><td>"+dResponse[obj].user_id+"</td><td>"+dResponse[obj].user_firstname+"</td><td>"+dResponse[obj].user_lastname+"</td><td>"+dResponse[obj].user_latitude+"</td><td>"+dResponse[obj].user_longitude+"</td></tr>"; } } window.onload=Table;
<table id="Results"> </table>
I hope this help you. 希望对您有所帮助。 Happy coding!
编码愉快!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.