Create html table in jQuery from array

Question

I have an array of elements from my database. I used ajax (POST procedure) to get it. Now I want to create a table, which will contain those elements. I don't exactly know how to do it in jQuery. I've got this:

$.post('script.php',{login: '1'}, 'json').done(function(data) { 
    results = ''; 
    data.table.forEach(function(row){
        results += '<tr><td>' + row.name + '</td><td>' + row.lastname + '</td><td>' + row.data + '</td></tr>';
    });
    $('#MyTable tbody').html(results);
});

My script look's like:

header('Content-Type: application/json');
...
$result=mysql_query($query); 
$table = array();
while($row=mysql_fetch_array($result)){
$table[] = $row;
}
$data['table'] = $table;
echo json_encode($data);

Edit: I corrected my mistakes and Now I have errors in console when I open table. It displays:

TypeError: data.forEach is not a function

Does somebody know how the structure of this sentence should look ?

Well, nothing is displayed... I'm not sure what's wrong. My array from script is like: Array ( [0] => 2 [id] => 2 [1] => Roberto [name] => Roberto [2] => Robertos [lastname] => Robertos [3] => 2016-01-27 22:10:18 [data] => 2016-01-27 22:10:18 ) — Roberto
– Roberto, Commented Jan 28, 2016 at 1:27
doesn't seem to be a property table in that array. try just data.forEach(... Sample of whole json structure would help — charlietfl
– charlietfl, Commented Jan 28, 2016 at 1:30
Typo: row.lastanme should be row.lastname. But that won't cause this problem. — Barmar
– Barmar, Commented Jan 28, 2016 at 1:36

歐津柏 · Accepted Answer · 2016-01-28 09:34:35Z

1

I see that you said your php script has data, so I guess the problem should be this line:

echo json_encode();

it should be

echo json_encode($data);

In your javascript I would do it this way

$.post('script.php',{login: '1'}, function(data) { 
results = ''; 
$.each(data.table, function(idx, row){
    results += '<tr><td>' + row.name + '</td><td>' + row.lastanme + '</td><td>' + row.data + '</td></tr>';
});
$('#MyTable tbody').html(results);

});

edited Jan 28, 2016 at 9:34

answered Jan 28, 2016 at 2:55

歐津柏

945 bronze badges

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

4 Comments

Roberto Over a year ago

OMG thanks but it doesn't solve whole problem. Now when I correct my script , when I open table i've got error in console: TypeError: data.forEach is not a function Does somebody know how the structure of this should look ?

Roberto Over a year ago

Thank You for your help, but still nothing is displayed (but there are no errors in console now)

歐津柏 Over a year ago

well, 2 possible problems here, 1. you didn't get response from php script, see what you got with console.log(data) 2. if there is response, see what you have with console.log(results) after the $.each() loop

Roberto Over a year ago

OK I SOLVE it. The problem was in names of table... THANK YOU VERY MUCH dude.

Collectives™ on Stack Overflow

Create html table in jQuery from array

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related