Как отобразить содержимое Dynami c в модальном режиме?

Question

Когда я нажимаю на кнопку, я хочу, чтобы открыть модал, и в этом модале я хочу показать некоторые данные, которые я получаю с сервера. Я использую JSON server как фальшивый сервер и Materialise css как css framework. Я могу открыть только модальное частично и отобразить часть моих данных. Я не вижу никаких ошибок в консоли. Это ссылка на мой репозиторий Github: https://github.com/Ivan3628/IT-logger-js

HTML

<ul>
        <li>
          <a
            href="#tech-list-modal"
            class="btn-floating green modal-trigger tech-collection"
            ><i class="material-icons">person</i></a
          >
          <!--Tech list modal-->
          <div id="tech-list-modal" class="modal">
            <div class="modal-content">
              <h4>Technician List</h4>
              <ul class="collection" id="tech-workers"></ul>
            </div>
          </div>
        </li>
</ul>

app. js

const showTechList = () => {
  axios
    .get("http://localhost:5000/techs")
    .then(response => ui.showList(response.data))
    .catch(err => console.log(err));
};

document
  .querySelector(".tech-collection")
  .addEventListener("click", showTechList);

пользовательский интерфейс. js

class UI {
  constructor() {
    this.techList = document.querySelector("#tech-workers");
  }
 showList(techs) {
    let output = "";

    techs.forEach(tech => {
      output += `
      <li class="collection-item">
      <div>
       ${tech.firstName} ${tech.lastName}
       <a href="#!" class="secondary-content delete-tech" data-id="${tech.id}">
          <i class="material-icons grey-text">delete</i>
        </a>
      </div>
    </li>`;
    });
    this.techList.innerHTML = output;
  }
}

export const ui = new UI();

дБ. json

{
"techs": [
    {
      "firstName": "Jennifer",
      "lastName": "Williams",
      "id": 1
    },
    {
      "firstName": "John",
      "lastName": "Doe",
      "id": 2
    },
    {
      "firstName": "Sam",
      "lastName": "Smith",
      "id": 3
    }
  ]
}

Answer 1

Просто чтобы прояснить, нет абсолютно никакой проблемы с размещением ul> li внутри модала в materializ css. Кодовое поле для демонстрации:

https://codepen.io/doughballs/pen/RwPpLZY

Мы начинаем с одного пустого ul внутри модала:

<!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <ul class="collection" id="tech-workers">
        <!-- no content! -->
      </ul>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">x</a>
    </div>
  </div>

Для создания динами c содержание, которое я использовал, выберите. Это может быть что угодно - вызов базы данных, локальное хранилище, содержимое страницы - что угодно. Но для этой демонстрации легко использовать select:

    <select>
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Add 1 item</option>
      <option value="2">Add 2 items</option>
      <option value="3">Add 3 items
    </select>

Затем, когда выбор изменяется, я выбираю значение и использую его как al oop, чтобы добавить новый элемент коллекции к ul, сначала очистив его, чтобы каждый раз иметь мод * fre sh.

$('select').on('change',function(){

    var selected = Number( $('select').find(":selected").val() );

    $('#tech-workers').empty();

      for(var i=1; i <= selected; i++ ) {
        $('#tech-workers').append(`<li class="collection-item">I am item number ${i}</li>`);
      }

    $('.modal').modal('open');

  });

Answer 2

Я решил это. Я думаю, что это, возможно, проблема с материализацией css. Вместо использования списка для отображения контента я просто использовал строку и вместо перечисленного элемента я использовал col s12 до l oop через данные.

html

  <!--Technician list-->
          <div id="tech-list-modal" class="modal">
            <div class="modal-content">
              <h4>Technician list</h4>
              <div class="row" id="tech-workers"></div>
            </div>
          </div>

пользовательский интерфейс. js

showList(techs) {
    let output = "";

    techs.forEach(tech => {
      output += `
     <div class="col s12">
      ${tech.firstName} ${tech.lastName}
       <a href="#!" class="secondary-content delete-tech" data-id="${tech.id}">
          <i class="material-icons grey-text">delete</i>
        </a>
        <div class="divider"></div>
      </div>

   `;
    });
    this.techList.innerHTML = output;
  }