Error in data binding javascript in laravel blade : "name " is undefined

See more:

Javascript

PHP

i have an ajax code for search on keyup that display courses, i have 2 tables courses and categories and two model for them course and category they have an one to many relationship.
in JS code when i trying to search course name and dispalying the course with category name using ${course.category.name} it gives me course.category is undefined and all div disappears when i delete this part "${course.category.name}" from the code the search is working fine but for sure there's no category name showing. ps: the php part is working fine.

here is the problem

<a href="{{url('/courses/category')}}/${course.category_id}" class="btn_4"> ${course.category.name} </a>

What I have tried:

//courses blade

//this is the laravel part

<div class="row" id="allcourses">

                    @foreach($courses as $course)

                    <div class="col-sm-6 col-lg-4 mb-4">
                        <div class="single_special_cource">
                            <img src="{{asset($course->img)}}" class="special_img" alt="">
                            <div class="special_cource_text">
                                <a href="{{route('course.category',$course->category_id)}}" class="btn_4">{{$course->category->name}}</a>
                                <h4>${{$course->price}}</h4>
                                <a href="{{route('course.details',$course->id)}}"><h3>{{$course->name}}</h3></a>
                                <p>{{substr($course->desc, 0, 200)}}</p>
                            </div>
                        </div>
                    </div>

                    @endforeach

                </div>
        </div>
    </section>
<!--::blog_part end::-->
@endsection

//here is the ajax part

@section('script')
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script>
    $('#keyword').keyup(function(){
        
        let keyword = $(this).val();
        var url="{{ route('course.search') }}" + "?keyword=" + keyword;
        console.log(url);
        $.ajax({
            url:url,
            type: "GET",
            contentType: false,
            processData: false,
        
            success:function(data)
            {
                console.log(data);

                $('#allcourses').empty();

                for (course of data)
                    {
                        $('#allcourses').append(`

                            <div class="col-sm-6 col-lg-4 mb-4">
                                <div class="single_special_cource">
                                    <img src="{{asset('${course.img}')}}" class="special_img" alt="">
                                    <div class="special_cource_text">
//here is the problem 

<a href="{{url('/courses/category')}}/${course.category_id}" class="btn_4"> ${course.category.name} </a>

<h4>$ ${course.price}</h4>
<a href="{{url('/courses/details')}}/${course.id}"><h3>${course.name}</h3></a>
<p>${course.desc.substring( 0, 200)}</p>
                                    </div>
                                </div>
                            </div>
                        `);
                    }
            }

        });

    });

        
        
        

        
    
</script>
@endsection

//Route

Route::get('/courses','CourseController@list')->name('course.list');

Controller>>

class CourseController extends Controller
{
    //All Courses
    function list(){
        $courses=Course::get();
        return view('front.courses.courses',[
            'courses'=>$courses
        ]);
    }
}

//Models

//category
class Category extends Model
{
    //
    public function courses()
    {
        return $this->hasMany('App\Course');
    }

}

//Course

class Course extends Model
{
    //
    
    public function category()
    {
        return $this->belongsTo('App\Category');
    }
}