Question

Having trouble using ajax to retrieve info from a database. I was getting the code from here:

1. http://openenergymonitor.org/emon/node/107
   the code from here worked but would only output 1 item
2. Simple Ajax Jquery script- How can I get information for each of the rows in the table?
   I tried to add this to my code but I could not get it to work.

I am getting everything from a table with the following php:

$result = mysql_query("SELECT * FROM voterecords");  

$data = array();
while ( $row = mysql_fetch_row($result) )
{
  $data[] = $row;
}
echo json_encode($data);

which outputs the following if I navigate to that php page:

[["68","1234","0","1234",""],["69","added with ajax","0","this item was added using ajax",""]]

The format of the above is as follows:
id, title, votes, description, owner

I think that bit all works but I cant be sure because i dont know what JSON is supposed to look like.

---

Ok now here is the jquery which is supposed to retrieve the info from the JSON and put it into the html element #output

$(function () 
  {

    $.ajax({                                      
      url: 'retrieve.php', data: "", dataType: 'json',  success: function(rows)
      {
        for (var i in rows)
        {
         var row = rows[i];          

          var id = row[0];              
          var name = row[1];
          var votes = row[2];  
          var info = row[3]; 

          $('#output').append("<b>id: </b>"+id+"<b> name: </b>"+name+"<b> votes: </b>"+votes+"<b> info: </b>"+info)
                      .append("<hr />");
    } 
  } 
});

I was expecting this to output all the info but nothing happens.

Answer 1

Your code is fine except you have a missing closing ) from the callback function.

Also, in JavaScript, it’s better to place opening braces on the same line, not on the next, as is common in some other languages.

Corrected/cleaned-up code:

$(function () {
    $.ajax({url: 'retrieve.php', dataType: 'json'}).done(function(rows) {
        for (var i in rows) {
            var row = rows[i];
            var id = row[0];
            var name = row[1];
            var votes = row[2];
            var info = row[3];
            $('#output')
                .append("<b>id: </b>"+id+"<b> name: </b>"+name+"<b> votes: </b>"+votes+"<b> info: </b>"+info)
                .append("<hr />");
        }
    });
});