Проблемы с областью действия в Javascript в файле лезвия Laravel

Question

Работа над приложением, при котором я получаю некоторые данные из серверной части и динамически заполняю файл блейда Laravel. Я использую Javascript для выполнения этой задачи. На веб-интерфейсе я разделен на 2 основных столбца (левый столбец и правый столбец). В левом столбце есть ссылка, которая при наведении курсора мыши или нажатии на соответствующую политику отображается справа.

В коде Javascript созданы функциональные возможности, благодаря которым, когда документ готов, извлекают все данные и добавляют переменную asmData. Далее при вводе события мыши (по ссылке в левой части страницы) отобразите соответствующие политики в таблице.

Проблема в том, что я получаю сообщение об ошибке asmData, когда я использую приведенный ниже код (вариант 1), и когда я передаю все данные события ввода мыши внутри функции document.ready (вариант 2), я не вижу никаких данных в таблице.

Левый столбец, содержащий ссылку с динамическим идентификатором

 <div class="col-md-4">
    @foreach($asm as $a)
         <a href="#demo{{$i}}" class="list-group-item list-group-item-primary dropdown-toggle" data-toggle="collapse" data-parent="#MainMenu" style="color: #868ba1;" id="{{ $a['id'] }}"> Agency Sales ID : {{ $a['id'] }} </a>
    @endforeach
    </div>

Правый столбец, содержащий таблицу, которую я хотел бы заполнить динамически

 <div class="col-md-8">
     <table class="table table-hover mg-b-0 tx-11" id="summary-table">
        <thead>
          <tr>
            <th>POLICY NUMBER</th>
            <th>NAME</th>
            <th>STATUS</th>
          </tr>
        </thead>
          <tbody>
            <tr> <!-- Add policies dynamically via JS under respective thead columns--></tr> 
          </tbody>
    </table>
    </div>

код JavaScript (вариант 1)

//Check if asm variable is set
<?php if(isset($asm) and isset($usm) and isset($ag)){ ?>
$( document ).ready(function() {
  var asmData = {!! json_encode($asm) !!};
});

$(document).on("mouseenter", "a", function() {

   var $tb = $('#summary-table tbody');

       //Make sure table is empty
       $tb.empty();

  //Fetch id of a tag in the DOM
  var asmId = $(this).attr('id');
  var asmPolicies = '';
  for(var i = 0; i < asmData.length; i++) {
      if(asmId == asmData[i]['id']) {
          for(var j = 0; j < asmData[i]['policies'].length; j++){
              var pol = asmData[i]['policies'][j];
              asmPolicies += '<tr><td>' + pol.policy_no + '</td><td>' + pol.policy_holder_name + '</td><td>' + pol.status + '</td><td>' + '</td></tr>';
          }
      }
  }
  // we append asmPolicies Html to the table
  $tb.append(asmPolicies);
  //END ASM
});
<?php } ?>

код JavaScript (вариант 2)

//Check if asm variable is set
<?php if(isset($asm) and isset($usm) and isset($ag)){ ?>

//document is ready
$( document ).ready(function() {
  var asmData = {!! json_encode($asm) !!};

   //On mouse enter
  $(document).on("mouseenter", "a", function() {

   var $tb = $('#summary-table tbody');

       //Make sure table is empty
       $tb.empty();

  //Fetch id of a tag in the DOM
  var asmId = $(this).attr('id');
  var asmPolicies = '';
  for(var i = 0; i < asmData.length; i++) {
      if(asmId == asmData[i]['id']) {
          for(var j = 0; j < asmData[i]['policies'].length; j++){
              var pol = asmData[i]['policies'][j];
              asmPolicies += '<tr><td>' + pol.policy_no + '</td><td>' + pol.policy_holder_name + '</td><td>' + pol.status + '</td><td>' + '</td></tr>';
          }
      }
  }
  // we append asmPolicies Html to the table
  $tb.append(asmPolicies);
  //END ASM
});
});
<?php } ?>