Question

正在使用Laravel应用程序，以便从前端获取数据并填充动态地在前端使用Javascript。在前端，我分为2个主要列（左列和右列）。在左列上有一个链接，当将鼠标悬停或单击时，相应的策略将显示在右侧。

问题在于，很难迭代包含数组Javascript对象并在表中动态显示它们的policy数组。

当我使用以下方法时，表主体中会出现 [object Object]

后端的asm变量

"agency_sales": [
    {
        "id": "111",
        "policies": [
            {
                "name": "JOHN DOE 1",
                "sum_covered": "555000",
                "date": "2018-05-16 12:02:32"
            },
            {
                "name": "JOHN DOE 2",
                "sum_covered": "404000",
                "date": "2018-02-20 17:33:25"
            },
        ]
    }
    {
        "id": "222",
        "policies": [
            {
                "name": "JOHN DOE 1",
                "sum_covered": "555000",
                "date": "2018-05-16 12:02:32"
            },
            {
                "name": "JOHN DOE 2",
                "sum_covered": "404000",
                "date": "2018-02-20 17:33:25"
            },
        ]
    }
]

左列包含具有动态ID的链接

<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 Managers 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>NAME</th>
        <th>SUM</th>
        <th>DATE</th>
      </tr>
    </thead>
      <tbody>
        <tr> <!-- Add policies dynamically via JS under respective thead columns--></tr> 
      </tbody>
</table>
</div>

JavaScript代码

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

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

  //Make sure table is empty
  $('#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>';
          }
      }

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

Answer 1

几个问题-主要是

错误的JSON
不解析对象
将trs附加到trs而不是tbody

请注意链接上data属性的使用

Feature: Automation Test

@Login-Successful
Scenario: Login (Successful)
Given I go to "www.yahoo.com" URL
    Then I enter "m@yahoo.com" into "login.username" field and click tab
    Then I enter "1234567890" into "login.password" text field
    Then I clicked on "login.loginlink" login button
    Then I wait for "15" seconds
    And I will capture the page named "Login-Successful"

*Feature: Automation Test
Starting ChromeDriver 2.45.615291 (ec3682e3c9061c10f26ea9e5cdcf3c53f3f74387) on port 11795
Only local connections are allowed.
Jan 07, 2019 6:00:53 PM org.openqa.selenium.remote.ProtocolHandshake createSession
INFO: Detected dialect: OSS
[31mFailure in before hook:[0m[31mGenericStepImplementation.setUp()[0m
[31mMessage: [0m[31mjava.lang.NoClassDefFoundError: org/apache/commons/collections/CollectionUtils
    at org.apache.commons.configuration.XMLConfiguration.constructHierarchy(XMLConfiguration.java:640)
    at org.apache.commons.configuration.XMLConfiguration.constructHierarchy(XMLConfiguration.java:635)
    at org.apache.commons.configuration.XMLConfiguration.initProperties(XMLConfiguration.java:596)
    at org.apache.commons.configuration.XMLConfiguration.load(XMLConfiguration.java:1009)
    at org.apache.commons.configuration.XMLConfiguration.load(XMLConfiguration.java:972)

使用Javascript动态遍历对象数组的问题

1 个答案: