如何在fetch请求中过滤指定响应数据并实现HTML复选框筛选功能

一、固定过滤指定编码 #

你可以通过数组的filter方法对接口返回的contracts列表做过滤，只保留你需要的编码项即可，优化后的代码如下：

// 定义需要保留的合同编码白名单
const allowedContractCodes = ['Code 1', 'Code 3']

fetch('API LINK')
    .then(response => response.json())
    // 先过滤再传入渲染函数
    .then(data => makeContract(data.contracts.filter(item => allowedContractCodes.includes(item.contractCode))))
    .catch(error => console.log(`Oh no! ${error}`))

const makeContract = (contracts) => {
    const selectEl = document.getElementById('contractCode');
    // 渲染前清空原有内容，避免重复渲染出现重复选项
    selectEl.innerHTML = ''
    contracts.forEach(contract => {
        // 无需JSON.stringify+slice操作，直接取字段值即可
        const htmlTemplate = `<option>${contract.contractCode}</option>`;
        selectEl.innerHTML += htmlTemplate;
    });
};

本次修改点：

• 新增白名单过滤逻辑，仅输出指定编码的选项
• 修复原代码冗余的字符串处理逻辑，避免特殊字符场景下的格式错误
• 修正forEach参数与数组重名的歧义问题
• 新增渲染前清空逻辑，避免重复调用时选项叠加

二、通过复选框动态选择要展示的编码 #

可以实现，你需要先在HTML中添加复选框组，再监听复选框的选中状态动态过滤渲染下拉列表即可，代码示例如下：

HTML部分 #

<!-- 合同编码筛选复选框组 -->
<div class="contract-filter">
  <label><input type="checkbox" value="Code 1" class="contract-checkbox"> Code 1</label>
  <label><input type="checkbox" value="Code 2" class="contract-checkbox"> Code 2</label>
  <label><input type="checkbox" value="Code 3" class="contract-checkbox"> Code 3</label>
  <!-- 更多编码可按相同格式补充 -->
</div>
<!-- 原有下拉选择框 -->
<select id="contractCode"></select>

JS部分 #

// 存储接口返回的全量合同数据
let allContracts = []

// 监听复选框变化事件，动态更新下拉选项
document.querySelectorAll('.contract-checkbox').forEach(checkbox => {
  checkbox.addEventListener('change', updateContractSelect)
})

fetch('API LINK')
    .then(response => response.json())
    .then(data => {
      // 缓存全量数据供后续筛选使用
      allContracts = data.contracts
      // 首次渲染下拉选项
      updateContractSelect()
    })
    .catch(error => console.log(`Oh no! ${error}`))

// 下拉选项更新方法
function updateContractSelect() {
  // 拿到当前选中的编码列表
  const selectedCodes = Array.from(document.querySelectorAll('.contract-checkbox:checked'))
    .map(item => item.value)
  // 过滤得到要渲染的合同列表
  const filteredList = allContracts.filter(contract => selectedCodes.includes(contract.contractCode))
  // 渲染下拉选项
  const selectEl = document.getElementById('contractCode');
  selectEl.innerHTML = ''
  filteredList.forEach(contract => {
    const htmlTemplate = `<option>${contract.contractCode}</option>`;
    selectEl.innerHTML += htmlTemplate;
  })
}

如果合同编码数量较多，你也可以在拿到全量接口数据后，通过JS遍历自动生成所有对应的复选框元素，无需手动编写HTML。

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