javascript - 我无法让 Javascript 中的过滤器工作

Question

这是我第一次尝试在 JS 中对数组使用 filer 方法。谁能告诉我我做错了什么？当我执行 console.log 时，在 const DrinksChecklist (过滤器行)之后，我的 list 未定义。我不知道为什么。另外，返回行之后的最后一部分(调试器行之后)是否必要？我在网上找不到任何地方，包括 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

我猜你正在尝试做这样的事情:

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()));
    });
  });
}