Я не могу заставить мой Фильтр в Javascript работать

Question

это первый раз, когда я пытался использовать метод filer в JS для массива.Может кто-нибудь сказать мне, что я делаю не так?Я получаю неопределенный для контрольного списка после const beverageChecklist (строка фильтра), когда я делаю console.log.Я не знаю, почему.Кроме того, нужна ли последняя часть (после строки отладчика) после строки возврата?Я не могу найти нигде в сети, включая сайт MDN, который дает полный пример всей функции.Пожалуйста, помогите и спасибо!

function filterChecklists() {
    $('.beverages_button').on('click', function(event) {
      //console.log('click')
      event.preventDefault()
      fetch(`/checklists.json`)
      .then(resp => resp.json())
      .then(checklists => {
         $('#checklist_container').html('')
         //console.log(checklists)
         const beveragesChecklist = checklists.filter(checklist => {
           return checklist.item === 'beverages';
           //console.log(beveragesChecklist)
            //console.log(checklist)
            debugger;

           let newChecklist = new Checklist(checklist)
           let checklistHtml = newChecklist.newChecklistForm()
            $('#checklist_container').append(checklistHtml)
         });
       })
     })
 }

Answer 1

Вы можете думать об этом следующим образом:

const beveragesChecklist = checklists.filter(checklist => {
  return checklist.item === 'beverages';
}

Это "то же самое", что и:

let tempArr = [];
for(let i = 0; i < checklists.length; i++) {
  let checklist = checklists[i];
  if(checklist.item === 'beverages') {
   tempArr.push(checklist);
  }
}
const beveragesChecklist = tempArr;

Таким образом, в итоге вы получите в напиткеChecklist все элементы измассив контрольных списков, которые удовлетворяют условию.После этого вы можете использовать этот результат по своему усмотрению.

Answer 2

Это то, что работает - спасибо, Твистер Пустоты!

 function filterChecklists() {
    $('.beverages_button').on('click', function(event) {
      //console.log('click')
      event.preventDefault()
      fetch(`/checklists.json`)
      .then(resp => {
        resp.json()
      .then(checklists => {
         $('#checklist_container').html('')
         //console.log(checklists)
           const beveragesChecklist = checklists.filter(checklist => checklist.item === 'beverages')
         .map(checklist => new Checklist(checklist))
         .forEach(checklist => $('#checklist_container').html(checklist.newChecklistForm()));
         });
      });
    })
  }

Answer 3

Полагаю, вы пытаетесь сделать что-то вроде этого:

function filterChecklists() {
  $('.beverages_button').on('click', function(event) {
    event.preventDefault()
    fetch(`/checklists.json`)
    .then(resp => {
       resp.json()
         .filter(checklist => checklist.item === 'beverages')
         .map(checklist => new Checklist(checklist))
         .forEach(checklist => $('#checklist_container').html(checklist.newChecklistForm()));
    });
  });
}