title: jQuery - Need to access PHP array values received after a successful ajax POST operation
body: <p><strong>PLATFORM:</strong></p>
  
  <p>jQuery, PHP, mySQL</p>
  
  <p><strong>WHAT I HAVE:</strong></p>
  
  <p>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. </p>
  
  <p><strong>WHAT I NEED:</strong></p>
  
  <p>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 <strong>jquery code</strong>, I would really appreciate that. Thanks in advance.</p>
  
  <p><strong>TABLE STRUCTURE</strong></p>
  
  <pre><code>fname   lname    city
  Ed        Al      SA
  Bob       B       MN
  Chris     V       KJ
  </code></pre>
  
  <p><strong>PHP code</strong></p>
  
  <pre><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' =&gt; $success, 'new_rows_data' =&gt; $new_rows_data)); 
  </code></pre>
  
  <p><strong>jQuery Code:</strong></p>
  
  <pre><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('&lt;tr&gt;'+
  
                            '&lt;td&gt;'+val.fname+'&lt;/td&gt;'+           
                            '&lt;td&gt;'+val.lname+'&lt;/td&gt;'+           
                            '&lt;td&gt;'+val.city+'&lt;/td&gt;'+           
  
                    '&lt;/tr&gt;');   
  
              });
        }//END if
       }       
     }) //END ajax
  
    return false;
  });
  </code></pre>
  
  <p>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 <strong>DESIRED OUTPUT</strong>:</p>
  
  <pre><code>First Name   Last Name  City
    Orko           C      OI    ---&gt; (Existing row of data)
    Gordon        Flash   KS    ---&gt; (Existing row of data)
    Ed             Al      SA    ---&gt; New row of data that just got appended
    Bob            B       MN    ---&gt; New row of data that just got appended
   Chris           V       KJ    ---&gt; New row of data that just got appended 
  </code></pre>