Render/display json file to html via jquery

how to display this json file using jquery?

[ { "code":"00-002159", "lastname":"SALUNGA", "firstname":"JEFFERSON" },
  { "code":"00-002160", "lastname":"TUMANAN", "firstname":"RHODA" } ]

and look like this

<table>
<thead>
<tr>
<th>code</th>   <th>lastname</th>          <th>firstname</th>
</tr>
</thead>
<tbody>
<tr>
<td>00-002159</td>     <td&开发者_StackOverflow中文版gt;SALUNGA </td>          <td>JEFFERSON</td>
<td>00-002160 </td>    <td>TUMANAN </td>          <td>RHODA</td>
</tr>
</tbody>
</table>

---

jQuery.template should be a good approach to show the data.

---

Parse json data, the data what you mention in example is array of objects

var data = [ { "code":"00-002159", "lastname":"SALUNGA", "firstname":"JEFFERSON" },
             { "code":"00-002160", "lastname":"TUMANAN", "firstname":"RHODA" } ]

[] - Represents js array an {} - Represents js Object So to parse data and get RHODA use data[0].firstname;

---

You could try this...

<script type='text/javascript'>
var data = [ { "code":"00-002159", "lastname":"SALUNGA", "firstname":"JEFFERSON" }, { "code":"00-002160", "lastname":"TUMANAN", "firstname":"RHODA" } ];
var string = "";
   $.each(data, function() {
      $.each(this, function(k, v) {
        v += " ";
        string += v;
      });
    });
    alert(string);
</script>

---

see this link also very useful

Loop through JSON object List

I didn't format the string properly , please check that

Assume your json has this format

[ { "code":"00-002159", "lastname":"SALUNGA", "firstname":"JEFFERSON" }, { "code":"00-002160", "lastname":"TUMANAN", "firstname":"RHODA" } ]

Assume you have response in a codes object

var finalHtml='';

finalHtml='<table>
<thead>
<tr>
<th>code</th>   <th>lastname</th>          <th>firstname</th>
</tr>
</thead>
<tbody>
<tr>'
    for(i=0; i< codes.length;i++)
    {

       //store the values and paint the html
       finalHtml+=<td>0codes[i].code;</td>     <td>codes[i].lastname </td>          <td>JEFFERSON</td>;      
    }
</tr>
</tbody>
</table>'

append to the dom finally

have some container and do

$('#containerID').html(finalHtml);