使用 Javascript 在 Laravel 刀片视图中显示数组中的动态数据时出现问题

Posted 2023-03-14

【中文标题】使用 Javascript 在 Laravel 刀片视图中显示数组中的动态数据时出现问题

【英文标题】：Problem displaying dynamic data in an array in Laravel blade view using Javascript

【发布时间】：2019-05-29 18:19:49

【问题描述】：

在一个 Laravel 应用程序上工作，我在一个数组中有一些数据。数据是关联数组的集合，其中每个数组都有一个身份号码和一个策略代码集合。我正在获取数据并显示给刀片。在视图中，我已划分为 2 列（使用引导网格系统）。在左列 (col-md-4) 中循环遍历变量并显示工作正常的标识号。在右侧列中，我有一个表格，应该根据 identity_no 的状态显示相应的策略代码。

我想实现一个功能，当用户单击或悬停在特定身份号码上时，相应的策略代码应显示在表格 tbody 标记的右列 (col-md-8) 上。对于后续的身份号码也应重复相同的操作（应仅在身份号码被单击或悬停后显示）。

存储在名为 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>

【问题讨论】：

那么您在实现这一目标时面临的问题是什么？

@MayankPandeyz 不确定如何在使用 javascript 单击或悬停特定身份号码后在表格中显示策略代码

@MayankPandeyz 你对此有何建议..

【参考方案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

希望对你有帮助:)

【讨论】：

您可以省略该控制台语句，我已将其包括在内用于测试目的。

感谢您的帮助，只是一些澄清.. 身份号码呢，我是否像使用策略代码一样使用 AJAX 填充它.. ?

是的，你说得对，Martin，实际上，我只是忘了提到那部分代码：

@foreach($asm as $a) 身份编号： $a['identity_no'] @endforeach

我已经在我的回答中添加了这一点......谢谢:)

【参考方案2】：

试试这个！我只知道 javascript，所以解决方案是纯 javascript 和 jquery 我已经合并了按钮上的悬停和单击事件。希望这可能会有所帮助

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>