Div клонируется несколько раз вместо необходимой суммы - PullRequest
Новая
       17

Div клонируется несколько раз вместо необходимой суммы

0 голосов
/ 07 апреля 2019

У меня есть некоторые данные JSON, которые содержат четыре раздела , и я хочу, чтобы мой HTML-тег div был клонирован в зависимости от количества разделов. Так что, если у меня есть 100 разделов в моем JSON, div должен быть клонирован 100 раз.

Мой div клонируется, и данные JSON добавляются к каждому, но проблема в том, что div клонируются более одного раза. Первый раздел JSON клонируется 4x, второй 3x, третий 2x и т. Д. Здесь есть шаблон, но я не уверен, почему это происходит.

1010 * JSON *

Фрагмент JS: 

import $ from 'jquery';
import jsonData from "./test.json";

let onlyTitles = jsonData.d.results.filter(result => result.Title !== "");

onlyTitles.forEach(title => {
  let $clonedDiv = $("#template").clone();
  $clonedDiv.removeAttr("id");

  $clonedDiv.find("#filledRowBody").append(`<td>${title.Title}</td><td>${title.Role}</td><td>${title.Office}</td><td>${title.IsActive}</td>`);
  $clonedDiv.find("#filledRowBody").removeAttr("id");
  $("#titleBody").append($clonedDiv);
})

Фрагмент HTML: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="template" class="col-6">

  <h3 id="display-form-job-title"></h3>

  <div class="button-group">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Edit Form</button>

    <!-- Button trigger PDF -->
    <button type="button" class="btn btn-secondary" id="pdf-trigger" data-toggle="" data-target="#pdfprint">Save as PDF</button>
  </div>
  <hr>
  <h4>Hiring Goals:</h4>

  <div class="col-12">
    <table class="table order-list" id="hiring-goals-table">

      <thead>
        <tr>
          <td>Number of Hires</td>
        </tr>
      </thead>

      <tbody class="tbody-hire">
        <tr>
          <td></td>
        </tr>
      </tbody>

    </table>

  </div>

  <hr>

  <h4>Open Searches:</h4>

  <div class="col-12">
    <table class="table order-list" id="role-table">

      <thead>
        <tr>
          <td>Role</td>
          <td>Location</td>
          <td>Active</td>
        </tr>
      </thead>

      <tbody class="tbody-search">
        <tr>
          <td></td>
        </tr>
      </tbody>
    </table>

  </div>
  <h4>Roles Filled:</h4>
  <div class="col-12">
    <table class="table order-list" id="role-table">

      <thead>
        <tr>
          <td class="thead-emp">Name</td>
          <td class="thead-role-fill">Role</td>
          <td class="thead-loc-fill">Location</td>
          <td class="thead-act-fill">Active</td>
        </tr>
      </thead>

      <tbody>
        <tr id="filledRowBody">

        </tr>
      </tbody>
    </table>
  </div>
</div>

<div id="titleBody">

</div> <!-- col-6 -->

1 Ответ

0 голосов
/ 08 апреля 2019

Оказалось, что #titleBody был внутри col-6 div, что как-то привело к дублированию.

...