How to display array data from Ajax in HTML (in Laravel 4.1)

Question

I am making an Ajax call to a controller that is returning back array data to my view. I want to take this array data and have it displayed in HTML on the click. I am not sure how to do this. This is what I have so far:

Ajax call:

request = $.ajax({ 
          url: "/fans/follow", 
          type: "post", 
          dataType: 'json',
          success:function(data){
            console.log(data);

          }, 
          data: {'id': id} ,beforeSend: function(data){
            console.log(data);
          } 
        });

Controller function:

public function follow() {

            $user_id = Auth::user()->get()->id;
            $fan_id = Input::get('id');

            $follow_array = Fanfollow::follows(Auth::user()->get()->id,0,7);

            return Response::json( $follow_array );
        }

follows function in my Fanfollow model:

public static function follows($user_id, $start = 0, $number_of_posts = 7) {
        $follows = DB::table('fanfollows')
                 ->join('fanartists', 'fanfollows.fan_id', '=', 'fanartists.fan_id')
                 ->join('fans', 'fanfollows.fan_id', '=', 'fans.id')
                 ->join('artists', 'fanartists.artist_id', '=', 'artists.id')
                 ->orderBy('fanartists.created_at', 'DESC')
                 ->where('fanfollows.user_id', '=', $user_id)
                 ->take($number_of_posts)
                 ->offset($start)
                 ->select(DB::raw('DATE_FORMAT(fanartists.created_at, "%M %d %Y") as created_at, fans.id, fans.first_name, fans.last_name, fans.gender'))
                 ->get();

        return $follows;

    }

Basically I want to take the data returned by the follows function in my model to the view and have it printed.

The console.log(data) after the success is printing out [Object, Object, Object, Object, Object, Object, Object]

where clicking further shows that each object is indeed the correct "row" of array data. How do I take this data and have it displayed in HTML?

Answer 1

Supposing you want to automatically insert your returned data into the following container:

<table id="my-containing-data">
    <tr>
        <th>Id</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Gender</th>
        <th>Created At</th>
    </tr>
</table>

Into your success event do the following:

success: function(data){
    $.each(data, function(index, obj){
        var tr = $("<tr></tr>");

        tr.append("<td>"+ obj.id +"</td>");
        tr.append("<td>"+ obj.first_name +"</td>");
        tr.append("<td>"+ obj.last_name +"</td>");
        tr.append("<td>"+ obj.gender +"</td>");
        tr.append("<td>"+ obj.created_at +"</td>");

        $("#my-containing-data").append(tr);
    });
}

BUT!!!

If you want to inject data ONLY on click, you have to assign returned data to a variable.

Somewhere before ajax call:

var myReturnedData;

The success event will look like:

success: function(data){
    myReturnedData = data;
}

And the click event:

$("#my-handler").on("click", function(e){
    e.preventDefault();

    $.each(myReturnedData, function(index, obj){
        var tr = $("<tr></tr>");

        tr.append("<td>"+ obj.id +"</td>");
        tr.append("<td>"+ obj.first_name +"</td>");
        tr.append("<td>"+ obj.last_name +"</td>");
        tr.append("<td>"+ obj.gender +"</td>");
        tr.append("<td>"+ obj.created_at +"</td>");

        $("#my-containing-data").append(tr);
    });
})

I hope it will be usefull.