Проблема Цикл массива объектов динамически с использованием Javascript

Question

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

Проблема заключается в том, что довольно сложно перебирать массив политик, который содержит коллекцию объектов Javascript, и динамически отображать их в таблице.

Когда я использую метод ниже, я получаю [объект объекта] в теле таблицы

переменная 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"
            },
        ]
    }
]

Левый столбец, содержащий ссылку с динамическим идентификатором

<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 в ссылке

const asmData = [{
  "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 3",
      "sum_covered": "555000",
      "date": "2018-05-16 12:02:32"
    },
    {
      "name": "JOHN DOE 4",
      "sum_covered": "404000",
      "date": "2018-02-20 17:33:25"
    }
  ]
}]



$(document).on("mouseenter", "a", function() {
  var $tb = $('#summary-table tbody');
  //Make sure table is empty

  $tb.empty()

  var asmId = $(this).attr('data-id'),
    asmPolicies = "";
  for (var i = 0; i < asmData.length; i++) {
    if (asmId == asmData[i]['id']) {
      for (var j = 0; j < asmData[i]['policies'].length; j++) {
        var pol = asmData[i]['policies'][j];
        asmPolicies += '<tr><td>' + pol.name + '</td><td>' + pol.sum_covered + '</td><td>' + pol.date + '</td><td>' + '</td></tr>';
      }
    }
  }
  //append asmPolicies Html to the table
  $tb.append(asmPolicies);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" data-id="111">111</a> | <a href="#" data-id="222">222</a>

<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>