Проблема с отображением динамических данных в массиве в режиме просмотра лезвия Laravel с использованием Javascript

Question

Работа над приложением Laravel, в результате чего у меня есть некоторые данные в массиве.Данные представляют собой набор ассоциативных массивов, в котором каждый массив содержит идентификационный номер и набор кодов политики .Забираю данные и показываю блейд.В представлении я разделил на 2 столбца (используя систему сетки начальной загрузки) .В левом столбце (col-md-4) я перебираю переменную и показываю идентификационный номер, который отлично работает .В правом столбце у меня есть таблица, в которой предполагается отображать соответствующий код политики в зависимости от состояния identity_no.

Я хочу добиться функциональности, благодаря которой, когда пользователь нажимает или наводит курсор на определенный идентификационный номер,соответствующие коды политики должны отображаться в правом столбце (col-md-8) в теге таблицы tbody.То же самое следует повторить для последующих идентификационных номеров (должно отображаться только после того, как идентификационный номер был нажат или наведен).

Коллекция массивов, которая хранится в переменной с именем asm

array:1 [▼
  0 => array:2 [▼
    "identity_no" => "71360"
    "policy_code" => array:2 [▼
      0 => "IL2***********"
      1 => "IL2***********"
      2 => "IL2***********"
    ]
  ]
  1 => array:2 [▼
    "identity_no" => "68181"
    "policy_code" => array:3 [▼
      0 => "IL2**********"
      1 => "IL2***********"
      2 => "IL2***********"
      3 => "IL2***********"
    ]
  ]
  2 => array:2 [▼
    "identity_no" => "53983"
    "policy_code" => array:4 [▼
      0 => "IL2*************"
      1 => "IL2*************"
      2 => "IL2*************"
      3 => "IL2*************"
      4 => "IL2*************"
      5 => "IL2*************"
    ]
  ]
]

Компоновка на виде

<div class="row">
  <!-- lEFT column -->
  <div class="col-md-4">
   <div id="MainMenu">
    <div class="list-group panel">
      <!-- Level 1 -->
      @foreach($asm as $a)
       <a href="#" class="list-group-item list-group-item-primary" > Identity No: {{ $a['identity_no'] }} </a>
      @endforeach
      <!-- END level 1-->
    </div> 
  </div>
</div>
<!-- END left column-->

<!-- Right column-->
<div class="col-md-8">
      <table id="summary-table">
          <thead>
          <tr>
              <th>Policy Codes</th>
          </tr>
          </thead>
          <tbody>
          <tr>
              <td> <!-- Add dynamic policy codes--></td>
            </tr> 
          </tbody>
      </table>
</div>

Answer 1

Вы можете сделать так (проверил на моем локальном компьютере и нашел, что он работает):

<script>
    var data;
    $( document ).ready(function() {
        data = {!! json_encode($asm) !!};
    });
    $(document).on("mouseenter", "a", function() {
        var policyCodes = '';
        var identityNo = $(this).attr('id');
        for(var i = 0; i < data.length; i++) {
            if(identityNo == data[i]['identity_no']) {
                for(var j = 0;j < data[i]['policy_code'].length;j++){
                    policyCodes += '<td>' + data[i]['policy_code'][j] + '</td>';
                }
            }

        }
        console.log(policyCodes);
        $('#summary-table tbody tr').html(policyCodes);
    });
</script>


@foreach($asm as $a)
                <a href="#" class="list-group-item list-group-item-primary" id="{{ $a['identity_no'] }}" > Identity No: {{ $a['identity_no'] }} </a>
                @endforeach

Надеюсь, это поможет:)

Answer 2

попробуйте это! Я знаю только javascript, так что решение в чистом javascript и jquery. Я слил оба события hover и click на кнопке. Надеюсь, что это может помочь

asm = [{
    identity_no: '1',
    policy_code: "bla bla111111111"
}, {
    identity_no: "2",
    policy_code: "bla bla2222222"
}, {
    identity_no: "3",
    policy_code: "bla bla3333"
}];

function btns() {
    var btn = $("<button class='tags' id=" + asm[i].identity_no + ">" + asm[i].identity_no + "</button>");
    $(btn).attr("data-search", asm[i].identity_no)
    $(btn).appendTo("#buttons")
}

$('#buttons').on('click mouseover', 'button', function() {
    console.log('click on', $(this).attr('id'));
    var a = asm.filter(x => x.identity_no === $(this).attr('id')).map(x => x.policy_code);
    console.log("found!--", a)
        // show this on other side of col
});

for (i = 0; i < asm.length; i++) {

    btns();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  <div id="buttons"></div>