How can I pass data from a php of then rows back to ajax ?

PHP

$query = 'SELECT * FROM picture order by rand() LIMIT 10';

$result = mysql_query($query);



while ($rec = mysql_fetch_array($result,  MYSQL_ASSOC)) {



$url[]=$rec['pic_location'];

$name[]=$rec['name'];

$age[]=$rec['age'];

$gender[]=$rec['gender'];





}



echo json_encode($url);

echo json_encode($name);

echo json_encode($age);

echo json_encode($gender);

Ajax

$(.goButton).click(function() {

   var dir =  $(this).attr(id);

   var imId = $(.theImage).attr(id);



   $.ajax({

      url: viewnew.php,

      dataType: json,

      data: {

         current_image: imId,

         direction    : dir

      },

      success: function(ret){

          console.log(ret);

          var arr = ret;

          alert(first image url:  + arr[0][0] + , second image url:  + arr[0][1]);  // This code isnt working

          alert(first image Name:  + arr[1][0] + , second image name:  + arr[1][1]);

          $(.theImage).attr(src, arr[0]);

          if ('prev' == dir) {

            imId ++;

         } else {

            imId --;

         }

         $(#theImage).attr(id, imId);

      }

   });



});

});

</script>

My question is how can I display the values here ? The Alert message is giving me Undefined ?