Displaying array data from JavaScript in table

Question

In controller function I have multidimensional array say $jobs I am getting this array in view's JavaScript success function alert(data) .

I have to pass this array to JavaScript success function and display this array data in table view without reloading page, how can I do this? I tried to convert array to json, but nothing is working, what is right way to do it?

Below is my JavaScript code:

function jobsearch()
{
     var form=$("#jobSearchForm")              
     $.ajax({
            type: 'POST',
            url: '/jobs/processjobsearch/',
            dataType: 'json',
            data: form.serialize(),
            success: function(data){
                alert(data);
                var json = JSON.parse(data);
            $.each(json.jobs, function(index, value) { alert(value);
                $.each(value, function(index, value) {
                    $("#data").append("<tr><td>" + value + '</td></tr>');
                });
            });
            $('#errorr-msg').html(json.errormsg);
           }        
        }); 
}

in alert data I am getting this array

Array
(
    [0] => Array
        (
            [id] => 3
            [jsp_title] => efsdf
            [jsp_subtitle] => sdfsdfdfs
            [jsp_desc] => dsfdfsdf
            [jsp_uid] => 1
            [jsp_ex_id] => php
            [jsp_date] => 2015-06-18 12:13:43
            [jsp_stdate] => sdfsdf
            [jsp_endate] => 
            [jsp_nature] => 0
            [jsp_location] => 
            [jsp_active] => 0
            [jsp_etype] => 2
        )

    [1] => Array
        (
            [id] => 4
            [jsp_title] => java devloper
            [jsp_subtitle] => core java advance java
            [jsp_desc] => all java related technologies
            [jsp_uid] => 1
            [jsp_ex_id] => java
            [jsp_date] => 2015-06-18 12:51:21
            [jsp_stdate] => 213123123
            [jsp_endate] => 123123123
            [jsp_nature] => 0
            [jsp_location] => nagar
            [jsp_active] => 0
            [jsp_etype] => 3
        )

)

Edit : Json data after json_encode($jobs)

[{"id":"1","jsp_title":"php developer","jsp_subtitle":"","jsp_desc":"develop ecommerce site","jsp_uid"
:"1","jsp_ex_id":"1,3","jsp_date":"2015-06-18 12:14:54","jsp_stdate":"","jsp_endate":"","jsp_nature"
:"1","jsp_location":"pune","jsp_active":"1","jsp_etype":"5"},{"id":"5","jsp_title":"web devloper","jsp_subtitle"
:"design , backend ,fruntend","jsp_desc":"2-4 year Exprience in\nPhp,html5,CssAjax...","jsp_uid":"1"
,"jsp_ex_id":"1|2,3,4","jsp_date":"2015-06-18 12:14:35","jsp_stdate":"11112015","jsp_endate":"11112015"
,"jsp_nature":"0","jsp_location":"baner, pune","jsp_active":"0","jsp_etype":"4"}]

Answer 1

If you are getting that data in the response, then you need to use:

json_encode($array);

That converts the print_r() output into a JavaScript readable JSON. Then you can use your JavaScript / jQuery function that you have posted to get things on the table.

Based on the JSON data, you need to update your success function:

success: function(data){
  for (var i = 0; i < data.length; i++) {
    tr = $('<tr/>');
    var srno = i+1;
    tr.append("<td>" + srno + "</td>");
    tr.append("<td>" + data[i].jsp_title  + "<br>" + data[i].jsp_subtitle  + "<br>" + data[i].jsp_desc  + "<br>" + data[i].jsp_date  + "</td>");
    $('#data').append(tr);
  }
}

Answer 2

After refering below, link changes in sucess function works for Me :

https://stackoverflow.com/questions/17066636/parsing-json-objects-for-html-table

Also changed dataType attribute in ajax call to 'json'

dataType: 'json'

success function

success: function(data){
                    for (var i = 0; i < data.length; i++) {
                    tr = $('<tr/>');
                    var srno = i+1;
                    tr.append("<td>" + srno + "</td>");
                    tr.append("<td>" + data[i].jsp_title  + "<br>" + data[i].jsp_subtitle  + "<br>" + data[i].jsp_desc  + "<br>" + data[i].jsp_date  + "</td>");
                    $('#data').append(tr);
                }
                   }