looping through json data in JavaScript

Question

This is similar to this question, but I thought I'd reword it a bit differently in order to make myself more clear. I have this json coming back from a $.ajax call:

{"COLUMNS":["PERSONID","FIRSTNAME","LASTNAME"],"DATA":[[1001,"Scott","Wimmer"],[1002,"Phillip","Senn"],[1003,"Paul","Nielsen"]]}

Q: In JavaScript, how do I parse through it to make a table such as:

<table>
 <thead>
  <tr>
   <th>PersonID</th>
   <th>First Name</th>
   <th>Last Name</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1001</td>
   <td>Scott</td>
   <td>Wimmer</td>
  </tr>
  <tr>
   <td>1002</td>
   <td>Phillip</td>
   <td>Senn</td>
  </tr>
  <tr>
   <td>1003</td>
   <td>Paul</td>
   <td>Nielsen</td>
  </tr>
 </tbody>
</table>

Matt · Accepted Answer · 2010-04-01 14:42:11Z

3

var yourJson = {"COLUMNS":["PERSONID","FIRSTNAME","LASTNAME"],"DATA":[[1001,"Scott","Wimmer"],[1002,"Phillip","Senn"],[1003,"Paul","Nielsen"]];    
var table = '<table>';

table += '<thead><tr><th>' + yourJson.COLUMNS.join('</th><th>') + '</th></tr></thead>';
table += '<tbody>';

for (var i=0;i<yourJson.DATA.length;i++) {
  table += '<tr><td>' + yourJson.DATA[i].join('</td><td>') + '</td></tr>';
};

table += '</tbody>';
table += '</table>';

answered Apr 1, 2010 at 14:42

Matt

75.4k26 gold badges156 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Phillip Senn Over a year ago

Thank you SO MUCH Matt Lunn! This answer has really opened the flood gates for me!

Giorgi · Accepted Answer · 2010-04-01 14:39:02Z

2

You can use client side templating engine such as jTemplates or pure to achieve it easily.

answered Apr 1, 2010 at 14:39

Giorgi

31k13 gold badges92 silver badges128 bronze badges

Collectives™ on Stack Overflow

looping through json data in JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related