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

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 bee开发者_C百科n 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 

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++;
}

I just came across this from a search and want to point out, where your code has:

$new_rows_data['fname'][] = $row['fname'];
$new_rows_data['lname'][] = $row['lname'];
$new_rows_data['city'][]  = $row['city'];

What's happening here is that you're building several parallel arrays. In javascript individual values would be visible as e.g. data.new_rows_data.fname[0] for the fname of the first row. When you do $.each(...) on this, your function should see arguments of i=="fname" and val equal to a 3-element array of first names.

munch's answer accomplishes the same thing with an explicit index, but for your specific case I would code like this:

$new_rows_data[] = $row;

Or for cases when the calculation of values is not so straightforward:

$new_rows_data[] = array(
    'foo' => get_foo($row),
    'bar' => $row['bar']
);

In either case, new_rows_data then becomes an array of objects with properties matching your PHP array keys, which would be accessible in javascript as data.new_rows_data[1].fname. Your $.each(...) loop would now see i as an integer, and val as an object with the properties you expect.

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.