Как сравнить массив, который находится на FireBase в javascript

Question

    let allS = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22
                ,23,24,25,26,27,28,29,30,31,32,33,34,35,36]
    var emp =   db.collection('BookedTicketData').get().then((snapshot) =>    {
    snapshot.docs.forEach((doc) => {
          data = doc.data();
          bseat = data.AllSeat
          console.log(bseat)  //(2) [33, 34]

       })
        return bseat;
    }).then((s) =>  {
       allS.filter(n => {
          if(s.includes(n)){
                 console.log("n -> " + n)
                 console.log("s -> " + s) // s -> 33,34
                 html += `<input type="checkbox" class="dn checkme" name="s-size" id="${n}" value="${n}" disabled/>
                 <label for="${n}" class="col-2 br-pill f7 m-1 btn text-white bg-danger border-danger grow" data-toggle="tooltip" title="Seat Already Booked" disabled>${n}</label>

                 `
             }
         else{
                 html += ` <input type="checkbox" class="dn checkme" name="s-size" id="${n}"  value="${n}"/>
                 <label for="${n}" class="col-2 br-pill f7 m-1 btn text-dark bg-white border-dark           grow">${n}</label>

               `
           }
        });
     })

   document.getElementById('loader').innerHTML = html;

Я должен сравнить массив, который находится в моей базе данных firebase, который я получил в переменной "bseat", и я сравниваю их значение со вторым массивом "allS", если значение в "bseat" находится в "al", тогда я должен применить этот код, и если нет другой части есть, но он ничего не делает

   $('input[type=checkbox]').on('change', function() {
                                console.log($(this).attr("id"));
                                let id = $(this).attr("id");
                                let checkbox = document.getElementById(id);
                                console.log("C->" + id)
                                let checkbox_label = $(`[for=${id}]`);
                                console.log("CL->" + checkbox_label)
                                if (checkbox_label.hasClass('bg-dark')) {
                                    console.log('Hii')
                                    checkbox_label.removeClass('text-white')
                                    checkbox_label.addClass('text-dark')
                                    checkbox_label.removeClass('bg-dark')
                                    checkbox_label.addClass('bg-white')
                                } else {
                                    console.log('Bye')
                                    checkbox_label.removeClass('text-dark')
                                    checkbox_label.addClass('text-white')
                                    checkbox_label.removeClass('bg-white')
                                    checkbox_label.addClass('bg-dark')
                                }
                            });

Answer 1

Здесь вам нужно добавить ваш загрузчик html после операции async. Также флажки onchange события должны быть добавлены после того, как флажки установлены в DOM. Это значит после установки innerHTML. В противном случае jQuery не сможет найти ваши флажки на странице.

Вы можете изменить свой код, как показано ниже.

let allS = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22
            ,23,24,25,26,27,28,29,30,31,32,33,34,35,36]
var emp =   db.collection('BookedTicketData').get().then((snapshot) =>    {
snapshot.docs.forEach((doc) => {
      data = doc.data();
      bseat = data.AllSeat
      console.log(bseat)  //(2) [33, 34]

   })
    return bseat;
}).then((s) =>  {
   allS.filter(n => {
      if(s.includes(n)){
             console.log("n -> " + n)
             console.log("s -> " + s) // s -> 33,34
             html += `<input type="checkbox" class="dn checkme" name="s-size" id="${n}" value="${n}" disabled/>
             <label for="${n}" class="col-2 br-pill f7 m-1 btn text-white bg-danger border-danger grow" data-toggle="tooltip" title="Seat Already Booked" disabled>${n}</label>

             `
         }
     else{
             html += ` <input type="checkbox" class="dn checkme" name="s-size" id="${n}"  value="${n}"/>
             <label for="${n}" class="col-2 br-pill f7 m-1 btn text-dark bg-white border-dark           grow">${n}</label>

           `
       }
    });

    document.getElementById('loader').innerHTML = html;

    //Note: Add change events after setting the html into the DOM.

    $('input[type=checkbox]').on('change', function() {
                console.log($(this).attr("id"));
                let id = $(this).attr("id");
                let checkbox = document.getElementById(id);
                console.log("C->" + id)
                let checkbox_label = $(`[for=${id}]`);
                console.log("CL->" + checkbox_label)

                if (checkbox_label.hasClass('bg-dark')) {
                    console.log('Hii')
                    checkbox_label.removeClass('text-white')
                    checkbox_label.addClass('text-dark')
                    checkbox_label.removeClass('bg-dark')
                    checkbox_label.addClass('bg-white')
                } else {
                    console.log('Bye')
                    checkbox_label.removeClass('text-dark')
                    checkbox_label.addClass('text-white')
                    checkbox_label.removeClass('bg-white')
                    checkbox_label.addClass('bg-dark')
               }
    });

 })