stackoom
  简体   繁体   中英

Populate data from an array into an html table

 原文  2015-02-12 23:24:52  0   2    javascript/ jquery/ html/ css

Question

<!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.

Will look like:

First Name: Last Name: Latitude: Longitude:

Mark Woo 37.7902 -122.458

2 answers

solution1
 1 ACCPTED  2015-02-12 23:49:37

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. 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!

solution2
 1  2015-02-12 23:53:03

You can do something like this with jQuery.

Looping through the object and accessing their properties with dot notation.

Eg: object.user_firstname

暂无
暂无

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 Populate html table with javascript array of array data? Populate HTML Table from javascript array format Populate an HTML table with characters from String Array Populate HTML table from Javascript array Populate an HTML table from javascript array How can I populate my HTML table with an array of data? Populate html table with javascript array Populate HTML Table with Certain Items from a JSON Array Populate html table with multiple value ranges from an array How to populate javascript model from html table data
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM