如何高效过滤服务器返回的Tasks数据并适配展示模板？

嘿，我来帮你搞定这个任务数据过滤和模板展示的问题！咱们分两步走：先搞定数据过滤，再把过滤后的数据套进展示模板里。

一、数据过滤：按需筛选你要的任务 #

你可以根据业务需求设定过滤条件，比如筛选有how_often值的任务、指定stakeholder或project的任务，甚至是排除空字段的任务。下面用JavaScript举几个实用的例子：

1. 过滤包含how_often值的任务 #

如果只想保留有执行频率标记的任务，可以这么写：

const tasks = [ /* 你的任务数据 */ ];
// 过滤how_often不为空的任务
const filteredTasks = tasks.filter(task => task.how_often?.trim() !== '');

2. 筛选指定stakeholder或project的任务 #

比如只保留stakeholder为2的任务（你的示例里都是2，换个值也一样）：

// 单条件过滤：stakeholder为2
const filteredTasks = tasks.filter(task => task.stakeholder === 2);
// 多条件过滤：stakeholder为2且project为2
const filteredTasks = tasks.filter(task => task.stakeholder === 2 && task.project === 2);

3. 排除所有核心字段为空的任务 #

如果想去掉那些除了id、title、关联字段外其他都是空的任务，可以自定义判断逻辑：

const filteredTasks = tasks.filter(task => {
  // 检查how_often、how_important_task等字段是否至少有一个非空
  return task.how_often || task.how_important_task || task.how_important_improvement;
});

二、适配展示模板：把数据渲染到页面 #

假设你用的是前端场景，这里给两种常见的实现方式，你可以根据自己的技术栈调整：

1. 原生JavaScript + HTML模板 #

先写好HTML模板结构：

<!-- 任务列表容器 -->
<div id="taskList"></div>

<!-- 隐藏的任务模板片段 -->
<template id="taskTemplate">
  <div class="task-item">
    <h3 class="task-title"></h3>
    <p class="task-id"></p>
    <p class="task-frequency" style="display: none;"></p>
    <p class="task-stakeholder"></p>
    <p class="task-project"></p>
    <hr>
  </div>
</template>

然后用JS渲染过滤后的数据：

const taskList = document.getElementById('taskList');
const template = document.getElementById('taskTemplate').content;

filteredTasks.forEach(task => {
  const clone = document.importNode(template, true);
  // 填充基础数据
  clone.querySelector('.task-title').textContent = task.title;
  clone.querySelector('.task-id').textContent = `任务ID: ${task.id}`;
  clone.querySelector('.task-stakeholder').textContent = `关联干系人ID: ${task.stakeholder}`;
  clone.querySelector('.task-project').textContent = `关联项目ID: ${task.project}`;
  
  // 如果有执行频率，显示对应节点
  if (task.how_often) {
    const frequencyEl = clone.querySelector('.task-frequency');
    frequencyEl.textContent = `执行频率: ${task.how_often}`;
    frequencyEl.style.display = 'block';
  }
  
  taskList.appendChild(clone);
});

2. 使用Handlebars模板引擎（更简洁） #

先引入Handlebars，然后定义模板：

<script id="taskTemplate" type="text/x-handlebars-template">
  {{#each this}}
  <div class="task-item">
    <h3>{{title}}</h3>
    <p>任务ID: {{id}}</p>
    {{#if how_often}}
      <p>执行频率: {{how_often}}</p>
    {{/if}}
    <p>关联干系人ID: {{stakeholder}}</p>
    <p>关联项目ID: {{project}}</p>
    <hr>
  </div>
  {{/each}}
</script>

然后编译模板并渲染：

const source = document.getElementById('taskTemplate').innerHTML;
const template = Handlebars.compile(source);
const taskList = document.getElementById('taskList');
// 直接把过滤后的数据传入模板渲染
taskList.innerHTML = template(filteredTasks);

核心思路就是先根据业务规则过滤出需要的数据，再把数据字段映射到模板的对应位置——如果你用Vue、React这类框架，只需要把过滤后的数据绑定到组件的列表渲染逻辑里就行啦。

内容的提问来源于stack exchange，提问作者Thinker