Есть ли способ отобразить данные из firestore в select в модале материализации? - PullRequest
Новая
       29

Есть ли способ отобразить данные из firestore в select в модале материализации?

0 голосов
/ 01 апреля 2020

Я пытаюсь отобразить данные, хранящиеся в Firestore, в списке выбора в модале материализации. Код, который я создал для создания модала: 

      <button class="btn red darken-2 z-depth-0 admin modal-trigger" data-target="modal-delete" style="display: none;"> Slett øvelse </button>


      <div id="modal-delete" class="modal">
        <div class="modal-content">
          <h4> Slett øvelse </h4><br />
            <select id="delete-form" class="" style="display: block;">

            </select>
            <button class="btn red darken-2 z-depth-0" style="margin-top: 5px;"> Slett </button>
        </div>
      </div>

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

function renderGuides(doc){
  let option = documents.createElement('option');
  let title = document.createElement('span');


  option.setAttribute('data-id', doc.id)
  title.textContent = doc.data().title;

  li.appendChild(title); // Line 74

  deleteForm.appendChild(li);
}

db.collection('øvelser').get().then((snapshot) => {
  snapshot.docs.forEach(doc => { // Line 80
    renderGuides(doc); // Line 81 
  });
});

Это не работает, и появляется этот код ошибки: 

Uncaught (in promise) ReferenceError: li is not defined
    at renderGuides (index.js:74)
    at index.js:81
    at Array.forEach (<anonymous>)
    at index.js:80

Я пробовал несколько решений, но ни одно из них не работает. Какой самый простой способ заставить это работать?

И после этого я планировал добавить это, чтобы удалить выбранные данные в списке, но, поскольку я не могу их даже отобразить, я не могу проверить если это работает: 

 cross.textContent = 'x';

li.appendChild(cross);

cross.addEventListener('click', (e) => {
  e.stopPropagation();
  let id = e.target.parentElement.getAttribute('data-id');
  db.collection('øvelser').doc(id).delete();
}

И мне просто интересно, должно ли это работать?

Большое спасибо за вашу помощь

1 Ответ

0 голосов
/ 02 апреля 2020

Добро пожаловать в StackOverflow! Эта ошибка говорит сама за себя. Вы не определяете, что такое "li" в вашем коде. Я предполагаю, что "li" - это список / массив объектов для чтения из Firebase, но я не вижу, где вы его определяете. Также я бы порекомендовал вам pu sh и вытолкнуть элементов из вашего массива в JS вместо добавления

...