如何在JS中渲染嵌套在Object内的Array的值？

问：

我正在为一个待办事项列表应用程序进行作业，该应用程序在“项目”中嵌套了一组“待办事项”。我也在学习和使用模块来分解代码。projectsArray 存储在 projects.js 中，而用于呈现到 DOM 的其他代码存储在 dom.js 中。

projectsArray = [
    {
        title: 'Client Presentation',
        todos: [
            {
                title: 'Project Proposal',
                date: '2023-11-15',
                important: true,
                completed: false
            },
            {
                title: 'Presentation Draft',
                date: '2023-11-21',
                important: false,
                completed: false
            }
        ]
    },
    {
        title: 'Shareholders Meeting',
        todos: [
            {
                title: 'Quarterly Reports',
                date: '2023-11-18',
                important: false,
                completed: false
            },
            {
                title: 'Projected Future Earnings',
                date: '2023-11-22',
                important: false,
                completed: false
            }
        ]
    }
];        

在页面加载时，项目列表将呈现到侧边栏，并且我添加了一个事件侦听器，因此当单击每个项目链接时，将运行一个函数将其待办事项列表呈现到主页：

// RENDER PROJECTS IN SIDEBAR
function renderProjectsSidebar() {
    
  sidebarProjects.innerText = '';

  projects.projectsArray.forEach((project, index) => {

      // Create list item for each project
      const projectItems = createHtmlElement('li', null, ['header-project-items', '|', 'no-bullets', 'flex', 'gap-sm', 'align-items-center'], 'data-index', index, null, headerProjects);

      const projectTitle = createHtmlElement('p', null, ['header-project-title'], null, null, project.title, projectItems);

      // EVENT: Render project to page
      projectItems.addEventListener('click', () => {
          renderProjectsPage(project, index);
      })
  });
}; 

这就是我被困住的地方。我只想显示我单击的项目的待办事项。例如，如果我单击“Client Presentation”，我希望它只呈现其嵌套的 todos 数组中的两个 todo。我的第一部分正在工作，我可以在其中呈现项目的标题和一些用于编辑和删除项目的按钮，以及用于打开模式表单以将待办事项添加到项目的按钮：

// RENDER PROJECTS TO PAGE
function renderProjectsPage(project, index) {
  const mainContainer = document.querySelector('#mainContainer');
  mainContainer.setAttribute('data-index', index);
  clearMainContainer()

  const todoHeaderContainer = createHtmlElement('div', null, ['todo-header-container'], null, null, null, mainContainer);

  const todoHeaderTitle = createHtmlElement('h2', null, ['todo-header__title', '|', 'title--sm', 'flex', 'justify-content-between'], null, null, project.title, todoHeaderContainer);

  const todoHeaderBtns = createHtmlElement('div', null, ['todo-header__btn-container', 'flex', 'gap-sm', 'align-items-center'], null, null, null, todoHeaderContainer);

  // Create add todo button
  const addTodoBtn = createHtmlElement('i', 'addTodoBtn', ['btn--add', '|', 'fa-solid', 'fa-circle-plus'], 'data-action', 'edit', null, todoHeaderBtns);

  addTodoBtn.addEventListener('click', () => todoModal.showModal());

  // Create edit button for project
  const projEditBtn = createHtmlElement('i', null, ['btn--edit', '|', 'fas', 'fa-edit'], 'data-action', 'edit', null, todoHeaderBtns);

  // Create delete button for project
  const projDeleteBtn = createHtmlElement('i', null, ['btn--delete', '|', 'fa-solid', 'fa-trash'], 'data-action', 'delete', null, todoHeaderBtns);

  // EVENT: Delete project
  projDeleteBtn.addEventListener('click', () => projects.deleteProject())

  // Create container for todos
  const todoContainer = createHtmlElement('div', 'todoContainer', ['todo-container'], null, null, null, mainContainer)

  renderTodos();
};

为了测试我是否至少能够访问和呈现“待办事项”，我在 forEach 循环中做了一个 forEach 循环。这当然显示了每个项目的待办事项。我不清楚如何仅获取当前项目的待办事项。

我创建了一个名为 currentProject 的变量，用于存储项目的索引 #。我的想法是我会以某种方式将索引号与过滤器结合使用，但我迷失了这一步。

function renderTodos() {

  const currentProject = document.querySelector('#mainContainer').getAttribute('data-index');
  const todoContainer = document.querySelector('#todoContainer'); 

  const filteredTodos = projects.projectsArray.filter((currentProject) => {
  currentProject.todos.forEach((todos, index) => {

      const todoItems = createHtmlElement('li', null, ['todo-item'], 'data-index', index, null, todoContainer);

      const todoTitle = createHtmlElement('h3', null, ['todo-item__title'], 'data-action', 'check', todos.title, todoContainer);
  })
})