在AJAX和LARAVEL中变得未定义

Question

im getting undefined problem in getting data from my laravel and ajax trials.

here's my ajax

var data = $(this).serialize();
$.ajax({
    url: "{{ route('ajaxdata.getactivities') }}",
    type: "GET",
    datatType: 'json',
    data: data,
    cache: false,
    processData: false,
    error: function (data) {
        console.log('AJAX call Failed');
    },
    success: function (data) {
        console.log('AJAX call success');
        $('#test').append('Add' + data.id); //data.id is showing undefined. if it is only data it doesnt show anything but AJAX call success
    },
});

Here's my route

Route::get('ajaxdata/getactivities', 'AjaxdataController@getactivities')
    ->name('ajaxdata.getactivities');

Here's my controller function

function getactivities()
{
    $activities = Activity::orderby('id', 'asc')->get();

    return view('student.ajaxdata', compact('activities'));
}

Answer 1

You have typo in orderby in your controller:

$activities = Activity::orderBy('id','asc')->get();

And ajax does not return view, try to:

return compact('activities');

Also data from response is array of activities and you can't take id of array. Try data[0].id for example.

Answer 2

Let us Rewrite the whole stuff

var data = $(this).serialize();
        $.ajax({
            url: "{{ route('ajaxdata.getactivities') }}",//if this page 

// does not end with something.blade.php, it will not render your url, i.e if you have seperate .js file, consider rewriting this line, probably like so
   // $url=$(this).attr('action');
            type:"GET",
            datatType : 'json',
            data: data,

            error: function (data)
      {
        console.log('AJAX call Failed');
      },
        success: function(data)
      {
        console.log('AJAX call success');
        $('#test').append('Add' + data.id); //data.id is showing undefined. if it `is only data it doesnt show anything but AJAX call success`
    },
        })

It looks like you want to return the view, you will need to render it like so

function getactivities()
    {    
    $activities = Activity::orderBy('id','asc')->get();
    $data=view('student.ajaxdata', compact('activities'))->render();
return response()->json(['html'=>$data]);
    }

and access it in your ajax success as

console.log(data.success)// this will return the page with the value and not the values alone.

but if you do not want to return the page, then work it out like so

function getactivities()
{    
$activities = Activity::orderBy('id','asc')->get();
//return view('student.ajaxdata', compact('activities'));
return response()->json(['$data'=>$activities]);
//remember the data returned here is a collection since you are using a `get() method, you cannot do data.id in your ajax without iterating over it, if you plan to return just a row, then rewrite this line`
$activities = Activity::orderBy('id','asc')->first();
}

and access it same way in ajax success.

    console.log(data)

$data: Array(3)
0:
ActionDescription: ""
ActivityDate: "0000-00-00"
ActivityID: "1"
ActivityName: "Training"
ActivityTime: "00:00:00"
ActivityTypeID: ""
Location: "Moa"
QRCode: ""
created_at: null
event_id: 1
id: 1
updated_at: null
__proto__: Object
1: {id: 3, ActivityName: "Bruno", Location: "NY", ActionDescription: "A", ActivityDate: "0000-00-00", …}
2:
ActionDescription: "Training"
ActivityDate: "0000-00-00"
ActivityID: null
ActivityName: "Bad Blood"
ActivityTime: "12:00:00"
ActivityTypeID: null
Location: "SM Trinoma"
QRCode: null
created_at: "2019-04-11 05:38:30"
event_id: 2
id: 2
updated_at: "2019-04-11 05:38:30"
__proto

Answer 3

Can you try to log data only?

As Activity::orderBy('id','asc')->get() may be returning collection here so better log data ,than do something like below success:

`success: function (data) {
    { 
        $.each(data, function() 
        { 
            console.log(data);  //shows the data in array 
            $('#test').append('Add' + data.id); }); 
        }
    }`

Answer 4

with all that hassle using $.each doesnt work for looping the data, so I use for to output the data. Here's my working code

$(document).ready(function() {
    var data = $(this).serialize(); 
    $.ajax({ url: "{{ route('ajaxdata.getactivities') }}", 
    method: "get",
    dataType:"JSON", 
    data: data, 
    // cache: false, 
    // processData: false, 
    success: function (data) 
    { 
        $.each(data,function(key,value) { 

            for(var x=0; x < value.length; x++){
            console.log(value[x].ActivityName);

            $('#activities').append($('<option>', {value:value[x].id, text:value[x].ActivityName}));
           }
        })
      }, 
   });
});

Answer 5

The issue is, You are sending view(Blade file) rather than data. send json formated data which is easy for you to access data in javascript. Why dont you use return response()->json(['status'=>200,'payload'=>$ourdata]); And also orderby is like orderBy

Like the following

$activities = Activity::orderBy('id','asc')->get(); return response()->json(['status'=>200,'payload'=>$activities]);