Problem displaying dynamic data in an array in Laravel blade view using Javascript

Question

Working on a Laravel application whereby I have some data in an array. The data is a collection of associative arrays whereby each array has an identity number and a collection of policy codes in it. Am fetching the data and displaying to the blade. In the view I have partitioned in 2 columns (using bootstrap grid system) . On the left column (col-md-4) am looping through the variable and displaying the identity number which works fine . On the right column I have a table whereby am supposed to display the respective policy code depending on the state of identity_no.

I want to achieve a functionality whereby when the user clicks or hovers over a particular identity number, the respective policy codes should be displayed on the right column (col-md-8)in the table tbody tag. The same should be repeated for subsequent identity numbers (should only display after the identity number has been clicked or hovered on).

Array collection that is stored in a variable called 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*************"
    ]
  ]
]

Layout on the view

<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

try this! I know javascript only so the solution is in pure javascript and jquery I have merged both hover and click event on the button. Hope this may help

 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> 

Answer 2

You can do like this(tested on my local and found it working):

<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

Hope it helps :)