How to display an php object using jquery

Question

I'm developing a joomla component and i'm using AJAX on my view for fetching database table content by sending get request to controller and then by creating a data object of model i called the a function in my model which in turn returns a JSON object.
Now my problem is to display that object's content in a html table through jQuery.

Here is my code:

jQuery("#papertitle").change(function(){
            console.log('eneterd jquery function');
            var title =jQuery('#papertitle').val();

            jQuery.ajax({
            type: 'GET',
            url: "http://localhost/joomladev/index.php?option=com_journals&task=payments&format=raw&title="+title,
            data: {title : title},
            success: function(data){
                console.log('data',data);
                jQuery('#data-table').html(data);   
            }
        });

    });

where data-table is my div. And it is showing JSON object as output like this:

 array (size=1)
  0 => 
    object(stdClass)[165]
      public 'paperid' => string '4' (length=1)
      public 'journalid' => string '7' (length=1)
      public 'papertitle' => string 'Big Data' (length=8)
      public 'classification' => string 'computer science' (length=16)
      public 'status' => string 'complete' (length=8)
      public 'comments' => string 'none' (length=4)

But I want the object details to be shown in form of a table. Any suggestions on how can i do it with jQuery!!

Answer 1

I would encode the object as JSON in your controller (http://localhost/joomladev/index.php) and return that json.

Then you could parse that json using javascript. Currently you get the php object dump which can't/shouldn't be parsed inside JS and create/fill up a table.

Answer 2

Try this in your ajax success function

success: function(data){
  jQuery.each(data,function(key,row){
       jQuery('#data-table').append('<tr>');
       jQuery.each(row,function(key,column){
          jQuery('#data-table').append('<td>'+column+'</td>');
       });
       jQuery('#data-table').append('</tr>');
  });  
}