jQuery - Need to access PHP array values received after a successful ajax POST operation

Question

Hi all,

PLATFORM:

jQuery, PHP, mySQL

WHAT I HAVE:

I am using jQuery to process information from a form and send all the POST data to a php file that does several operations and returns an array of data along with other necessary data. One of the arrays is an array of an array. I need to access this array of array values in such a way that I can append each of those nested array values to a table.

WHAT I NEED:

I have been battling out with the jquery code to get this to work for a long time but it does not work. So if any one can help me out with the jquery code, I would really appreciate that. Thanks in advance.

TABLE STRUCTURE

fname   lname    city
Ed        Al      SA
Bob       B       MN
Chris     V       KJ

PHP code

//Content of my PHP file that return json encoded data
$success = 1;

$new_rows_data['fname'] = array();
$new_rows_data['lname'] = array();
$new_rows_data['city'] = array();

$result = mysql_query("SELECT fname, lname, city FROM table LIMIT 3");
while( $row = mysql_fetch_array($result) ) 
{
    $new_rows_data['fname'][] = $row['fname'];
    $new_rows_data['lname'][] = $row['lname'];
    $new_rows_data['city'][]  = $row['city']
}

print json_encode(array('success' => $success, 'new_rows_data' => $new_rows_data)); 

jQuery Code:

$('#button_delete').click(function() {  

  $.ajax({
   type: 'POST',  
   cache: false,
   url: 'test.php',
   data: $('#form1').serialize(), 
   dataType: 'json',
   success: function(data) {            

      if(data.success == '1')
      {
             jQuery.each(data.new_rows_data, function(i, val) 
            {
                 $('#table').append('<tr>'+

                          '<td>'+val.fname+'</td>'+           
                          '<td>'+val.lname+'</td>'+           
                          '<td>'+val.city+'</td>'+           

                  '</tr>');   

            });
      }//END if
     }       
   }) //END ajax

  return false;
});

I am trying to get this new data to get appended to an existing table with id # table, so that i appears like the following DESIRED OUTPUT:

First Name   Last Name  City
  Orko           C      OI    ---> (Existing row of data)
  Gordon        Flash   KS    ---> (Existing row of data)
  Ed             Al      SA    ---> New row of data that just got appended
  Bob            B       MN    ---> New row of data that just got appended
 Chris           V       KJ    ---> New row of data that just got appended 

Answer 1

The first issue I see is one of loose typing:

if(data.success === 1)

should be

if(data.success == '1')

because as far as javascript is concerned, all returned data from AJAX is a string. I just noticed from @Jammus that your PHP code should also switch your $success variable to have either a value of 0 or 1.

Answer 2

Append has never been very friendly to me when I start combining text and objects inside it. Try this:

$.each(data.new_rows_data, function(i, val) {
   var tr = $('<tr></tr>');

   $.each(val, function(i, newVal){
      var td = $('<td></td>').text(newVal);
      tr.append(td);
   });

   $('#table').append(tr);
});

Should get the job done.

To Change to Multiple Rows with 3 Columns:

Best to change you're PHP array build to:

$result = mysql_query("SELECT fname, lname, city FROM table LIMIT 3");
$i = 0;
while( $row = mysql_fetch_array($result) ) 
{
    $new_rows_data[$i]['fname'] = $row['fname'];
    $new_rows_data[$i]['lname'] = $row['lname'];
    $new_rows_data[$i]['city']  = $row['city'];
    $i++;
}

Answer 3

can someone please define how all these parts of php and jqeury code combined in the same or different files in order to produce the appropriate result? thank you in advance, Mike