Render/display json file to html via jquery

Question

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>SALUNGA </td>          <td>JEFFERSON</td>
<td>00-002160 </td>    <td>TUMANAN </td>          <td>RHODA</td>
</tr>
</tbody>
</table>

you have to loop through the object and use some html to display thats it. — kobe, Jul 11 '11 at 07:15

score 1 · Answer 1 · answered Jul 11 '11 at 07:16

1

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

answered Jul 11 '11 at 07:16

Dr.Molle

116,463
16
195
201

espradley · Answer 2 · 2011-07-11T07:22:54.417

0

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>

edited Jul 11 '11 at 07:22

answered Jul 11 '11 at 07:16

espradley

2,138
2
17
15

score 0 · Answer 3 · answered Jul 11 '11 at 07:17

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;

score 0 · Answer 4 · edited May 23 '17 at 11:58

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);

Render/display json file to html via jquery

4 Answers4