使用Js在Laravel刀片中的表中显示动态数据时出现问题

Question

I am working an a Laravel project whereby am collecting some data from the backend. The data is in hierarchical/tree-like structure with the highest being asm then usm then ag . Each of the variable is a collection of associative arrays whereby each array has a unique id and collection of policies . In the view I have partitioned it into 2 columns (using bootstrap grid layout) mainly the left column (col-md-4) and right column (col-md-8).

In the left column (col-md-4) I have used bootstrap collapsible menus to display the arrays in a hierarchical structure which works fine. In the right column (col-md-8) I have a problem displaying the respective policies once the user hovers or clicks on id of a respective asm ,usm or ag.

I have tried to use some Javascript but it is not working as expected.

//asm variable (level 1)
array:3 [▼
  0 => array:3 [▼
    "id" => "157"
    "unit_sales" => array:7 [▶]
    "policies" => array:3144 [▶]
  ]
  1 => array:3 [▼
    "id" => "73401"
    "unit_sales" => array:1 [ …1]
    "policies" => array:8 [ …8]
  ]
  2 => array:3 [▼
    "id" => "6511"
    "unit_sales" => array:7 [ …7]
    "policies" => array:1987 [ …1987]
  ]
]

//usm variable (level 2)
array:3 [▼
  0 => array:3 [▼
    "id" => "1525"
    "ag" => array:10 [▶]
    "policies" => array:374 [▶]
  ]
  1 => array:3 [▼
    "id" => "74696"
    "ag" => array:12 [▶]
    "policies" => array:496 [▶]
  ]
  2 => array:3 [▼
    "id" => "47060"
    "ag" => array:1 [▶]
    "policies" => array:129 [▶]
  ]
]

//ag variable (level 3)
array:3 [▼
  0 => array:2 [▼
    "agent_no" => "42184"
    "policies" => array:38 [▶]
  ]
  1 => array:2 [▼
    "agent_no" => "21718"
    "policies" => array:59 [▶]
  ]
  2 => array:2 [▼
    "agent_no" => "78863"
    "policies" => array:3 [▶]
  ]
]

Left column am displaying the dropdown

<div class="col-md-4">
  <!--RSM looged in (See ASM downwards)-->
  @if(isset($asm, $usm , $ag))
    <div id="MainMenu">
      <div class="list-group panel">
        <!-- Level 1 -->
        @php
          $i = 1;
        @endphp
        @foreach($asm as $a)
         <a href="#demo{{$i}}" class="list-group-item list-group-item-primary" data-toggle="collapse" data-parent="#MainMenu" id="{{ $a['id'] }}"> Agency Sales Managers ID : {{ $a['id'] }} </a>
            <div class="collapse" id="demo{{$i}}">
            <!-- Level 2 -->
            @foreach($usm as $u)
              <a href="#SubMenu{{$i}}" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#SubMenu1" style="color: red;" id="{{ $u['id'] }}"> Unit Sales Managers ID : {{ $u['id'] }} <i class="fa fa-caret-down"></i></a>

              <div class="collapse list-group-submenu" id="SubMenu{{$i}}">
                <!-- Level 3 -->
                  @foreach($ag as $Agt)
                    <a href="#SubSubMenu1{{$i}}" class="list-group-item" data-toggle="collapse" data-parent="#SubSubMenu1" id="{{ $Agt['agent_no'] }}"> Agents Number : {{ $Agt['agent_no'] }}</a>
                  @endforeach
               <!-- END level 3-->
              </div>
              @endforeach 
              <!--END level 2-->
            </div>
         @php $i++; @endphp
        @endforeach
        <!-- END level 1-->
      </div> 
    </div>
  @endif
</div>

Right column (Table am populating the policies dynamically)

<div class="col-md-8">
 <table class="table table-hover mg-b-0 tx-11" id="summary-table">
    <thead>
      <tr>
        <th>POLICIES</th>
      </tr>
    </thead>
      <tbody>
        <tr> <!-- Add policies dynamically via JS --></tr> 
      </tbody>
</table>
</div>

Javascript code am using

<script>
//Returns true if asm , usm and ag variables are set
<?php if(isset($asm) and isset($usm) and isset($ag)){ ?>
      $( document ).ready(function() {
          var asmData = {!! json_encode($asm) !!};
          var usmData = {!! json_encode($usm) !!};
          var agData = {!! json_encode($ag) !!};
      });

      $(document).on("mouseenter", "a", function() {
          //Execute ASM
          var asmPolicies = '';
          //Fetch id of a tag in the DOM
          var asmId = $(this).attr('id');
          for(var i = 0; i < asmData.length; i++) {
              if(asmId == asmData[i]['id']) {
                  for(var j = 0; j < asmData[i]['policies'].length; j++){
                      asmPolicies += '<tr><td>' + asmData[i]['policies'][j] + '</td></tr>';
                  }
              }

          }
          $('#summary-table tbody tr').html(asmPolicies);
          //END ASM

          //Execute USM
          var usmPolicies = '';
          //Fetch id of a tag in the DOM
          var usmId = $(this).attr('id');
          for(var i = 0; i < usmData.length; i++) {
              if(usmId == usmData[i]['id']) {
                  for(var j = 0; j < usmData[i]['policies'].length; j++){
                      usmPolicies += '<tr><td>' + usmData[i]['policies'][j] + '</td></tr>';
                  }
              }

          }
          $('#summary-table tbody tr').html(usmPolicies);
          //END USM

          //Execute agents
          var agPolicies = '';
          //Fetch id of a tag in the DOM
          var agId = $(this).attr('id');
          for(var i = 0; i < agData.length; i++) {
              if(agId == agData[i]['agent_no']) {
                  for(var j = 0; j < agData[i]['policies'].length; j++){
                      agPolicies += '<tr><td>' + agData[i]['policies'][j] + '</td></tr>';
                  }
              }

          }
          $('#summary-table tbody tr').html(agPolicies);
          //END Agents
      });
<?php } ?>
</script>

Answer 1

try doing this

//Returns true if asm , usm and ag variables are set
<?php if(isset($asm) and isset($usm) and isset($ag)){ ?>
  $( document ).ready(function() {
      var asmData = {!! json_encode($asm) !!};
      var usmData = {!! json_encode($usm) !!};
      var agData = {!! json_encode($ag) !!};


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

      // here we delete the old data from the table 
      $('#summary-table tbody tr').html('');

      //Execute ASM
      var asmPolicies = '';
      //Fetch id of a tag in the DOM
      var asmId = $(this).attr('id');
      for(var i = 0; i < asmData.length; i++) {
          if(asmId == asmData[i]['id']) {
              for(var j = 0; j < asmData[i]['policies'].length; j++){
                  asmPolicies += '<tr><td>' + asmData[i]['policies'][j] + '</td></tr>';
              }
          }

      }
      // we append asmPolicies Html to the table
      $('#summary-table tbody tr').append(asmPolicies);
      //END ASM

      //Execute USM
      var usmPolicies = '';
      //Fetch id of a tag in the DOM
      var usmId = $(this).attr('id');
      for(var i = 0; i < usmData.length; i++) {
          if(usmId == usmData[i]['id']) {
              for(var j = 0; j < usmData[i]['policies'].length; j++){
                  usmPolicies += '<tr><td>' + usmData[i]['policies'][j] + '</td></tr>';
              }
          }

      }
      // we append usmPolicies to the table
      $('#summary-table tbody tr').append(usmPolicies);
      //END USM

      //Execute agents
      var agPolicies = '';
      //Fetch id of a tag in the DOM
      var agId = $(this).attr('id');
      for(var i = 0; i < agData.length; i++) {
          if(agId == agData[i]['agent_no']) {
              for(var j = 0; j < agData[i]['policies'].length; j++){
                  agPolicies += '<tr><td>' + agData[i]['policies'][j] + '</td></tr>';
              }
          }

      }
      // we append agPoliciesHtml to the table
      $('#summary-table tbody tr').append(agPolicies);
      //END Agents
  });
});