Printing json data recieved from php in tabular form in a div

Question

I am receiving data in JSON format for name & email by $.ajax() jquery function. I need to put this data in tabular format in a div ('#div1'). I am unable to do this. Can someone help?

JSON received:

[{"jname":"Charles","jemail":"[email protected]"},{"jname":"Bollen","jemail":"[email protected]"},{"jname":"Sita","jemail":"[email protected]"},{"jname":"Lita","jemail":"[email protected]"},{"jname":"Azma","jemail":"[email protected]"},{"jname":"Robert","jemail":"[email protected]"},{"jname":"Charu","jemail":"[email protected]"}]

jQuery Ajax Code:

$.ajax({
    type: "POST",
    url: "retrieve.php",
    data: jQuery("#form1").serialize(),
    cache: false,
    success:  function(data){
       $('#div1').html(data);
    }
});

Please, help. I need to print this data in tabular form in a div for Name & Email.

Do you really need help building a HTML table..?

MaggsWeb
– MaggsWeb

2015-08-12 07:03:59 +00:00
Commented Aug 12, 2015 at 7:03 — MaggsWeb
– MaggsWeb, Commented Aug 12, 2015 at 7:03
I need to know how to put this json data in tabular format.

Deadpool
– Deadpool

2015-08-12 07:05:11 +00:00
Commented Aug 12, 2015 at 7:05 — Deadpool
– Deadpool, Commented Aug 12, 2015 at 7:05

biancamihai · Accepted Answer · 2015-08-12 07:44:54Z

2

What about using a table? Something like this:

 $.ajax({
    type: "POST",
    url: "retrieve.php",
    data: jQuery("#form1").serialize(),
    cache: false,
    success:  function(data){
       var html = '<table>';
       JSON.parse(data).forEach(function(item){ 
           html += '<tr><td>'+item.jname+'<td><td>'+item.jemail+'</td></tr>'; 
       });
       html += '</table>';
       $('#div1').html(html);
}

});

edited Aug 12, 2015 at 7:44

answered Aug 12, 2015 at 7:05

biancamihai

9816 silver badges14 bronze badges

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

Comments

dakab · Accepted Answer · 2015-08-12 07:06:53Z

1

Put your JSON data into table rows, don’t forget the <tbody>:

var HTML = '';
var JSON = [{"jname":"Charles","jemail":"[email protected]"},
            {"jname":"Bollen","jemail":"[email protected]"}];
JSON.forEach(function(person){
    HTML += '<tr><td>' + person.jname + '</td><td>' + person.jemail + '</td></tr>';
});
document.body.insertAdjacentHTML('afterbegin','<table><tbody>' + HTML + '</tbody></table>');

answered Aug 12, 2015 at 7:06

dakab

5,97510 gold badges46 silver badges71 bronze badges

Comments

aldrin27 · Accepted Answer · 2015-08-12 07:05:53Z

0

You need to parse that.

For example:

$.ajax({
type: "POST",
url: "retrieve.php",
data: jQuery("#form1").serialize(),
cache: false,
success:  function(data){
   var parse = JSON.parse(data);
   //then do what you are going to do.
   alert(parse.jname);
   alert(parse.jemail);
}

answered Aug 12, 2015 at 7:05

aldrin27

3,4184 gold badges31 silver badges44 bronze badges

Collectives™ on Stack Overflow

Printing json data recieved from php in tabular form in a div

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related