laravel Ajax Eloquent Relationship can't get value

im trying to use jquery as my front end and laravel as my backend but i can't make my movie title to show up on producers table.

ProducerController.php

        if ($request->ajax()){
            $producers = Producer::with('movies')->get();
            return response()->json($producers);
         }
    }

index.blade.php

      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h1 class="col-12 modal-title text-left">Producers</h1>
          </div>

          <div class="modal-body">
            <div  class="table-responsive">
              <table id="producertable" class="table table-striped table-hover">
                <thead>
                  <tr>
                    <th>Producer ID</th>
                    <th>Producer Name</th>
                    <th>Email</th>
                    <th>Website</th>
                    <th>Movies</th>
                    <th>Edit</th>
                    <th>Delete</th>
                  </tr>
                </thead>
                <tbody id="producerbody">
                </tbody>
              </table>
            </div>

              <button type="button" class="btn btn-primary btn-lg float-right" data-toggle="modal" data-target="#CreateProducer">ADD<span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
              @if ($message = Session::get('success'))
              <div class="alert alert-success alert-block">
                <button type="button" class="close" data-dismiss="alert">×</button> 
                <strong>{{ $message }}</strong>
              </div>
              @endif
          </div>

          <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn">Close</button>
            <button type="button" class="btn btn-primary">Ok</button>
          </div>

        </div>
      </div>
    </div>

web.php:

Route::get('/producer/all',['uses' => 'ProducerController@getProducerAll','as' => 'producer.getproducerall'] );
Route::resource('producer', 'ProducerController');

movie.js:

      $.ajax({
          type: "GET",
          url: "/producer/all",
          dataType: 'json',
          success: function (data) {
          //console.log(data);
          $.each(data, function(key, value) {
            //console.log(value);
            id = value.id;
            var tr = $("<tr>");
            tr.append($("<td>").html(value.id));
            tr.append($("<td>").html(value.Name));
            tr.append($("<td>").html(value.EmailAddress));
            tr.append($("<td>").html(value.Website));
            tr.append($("<td>").html(value.movies.title));
            tr.append("<td align='center'><a href='#' data-toggle='modal' data-target='#editProducer' id='editproducerbtn' data-id="+ id + "><i class='fa fa-pencil-square-o' aria-hidden='true' style='font-size:24px' ></a></i></td>");
            tr.append("<td><a href='#'  class='deletebtn' data-id="+ id + "><i  class='fa fa-trash-o' style='font-size:24px; color:red' ></a></i></td>");
            $("#producerbody").append(tr);
            
     });
        },
      error: function(){
        console.log('AJAX load did not work');
        alert("error");
      }
    });
    });

These are my code but somehow i cant get the title of movies:

i tried inputting it to postman and it does get the movie table tho

im so confused TT^TT helpppp