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"}]

Praveen Kumar Purushothaman · Accepted Answer · 2015-06-19 10:53:13Z

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

edited Jun 19, 2015 at 10:53

answered Jun 19, 2015 at 9:17

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Durga Over a year ago

yes I have tried that before too and I was getting JavaScript readable JSON also but I am not able to get things into a table ,what changes i should do to work above code

Praveen Kumar Purushothaman Over a year ago

@Durga The code looks alright to me! Can you post the output of the JSON data, that is actually fetched when the AJAX request is made? Because the JS Code and your array structure do not match!

Durga Over a year ago

upvote for json_encode($array); , this again directed me to right path , thanks

Praveen Kumar Purushothaman Over a year ago

@Durga I was about to say that. Check my updated answer! Copied yours! ;)

Community · Accepted Answer · 2017-05-23 12:22:26Z

0

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

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Jun 19, 2015 at 10:42

Durga

1,3039 gold badges28 silver badges55 bronze badges

Collectives™ on Stack Overflow

Displaying array data from JavaScript in table

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related