如何在 fetch 中输出特定响应？

Question

目前我的下拉列表有大约 30 多个输出，但我想将列表减少到特定项目，但我不知道如何处理。

我的 API 是什么样子的~

{
  "filter": "A",
  "timestamp": "2021-08-05T15:52:02.489962-04:00",
  "contracts": [
    {
      "contractCode": "Code 1",
      "contractName": "Name of contract 1",
      "status": "A"
    },
    {
      "contractCode": "Code 2",
      "contractName": "Name of contract 2",
      "status": "A"
    },
    {
      "contractCode": "Code 3",
      "contractName": "Name of contract 3",
      "status": "A"
    }
  ]
}

假设我只想输出代码 1 和代码 3，如何在我的 fetch 调用中对其进行过滤？ 是否可以设置一个 html 复选框来选择我要输出的每个代码？

我的 Fetch 调用

fetch('API LINK')
    .then(response => response.json())
    .then(data => makeContract(data.contracts))
    .catch(error => console.log(`Oh no! ${error}`))
       const makeContract = (contracts) => {
       const body = document.getElementById('contractCode');
       contracts.forEach((contracts) => {
       const htmlTemplate = `
           <option>${JSON.stringify(contracts.contractCode).slice(1, -1)}</option>
        `;
        body.innerHTML += htmlTemplate;
    });
};

Answer 1

function demo() {
  const include = Array.from(document.querySelectorAll('[name=code]:checked')).map(e=>e.value);
  const contracts = sample().contracts;
  contracts.forEach(contract => {
    if (include.includes(contract.contractCode)) { console.log(contract); }
  });
}

function sample() {
  return {
    "filter": "A",
    "timestamp": "2021-08-05T15:52:02.489962-04:00",
    "contracts": [
      {
        "contractCode": "Code 1",
        "contractName": "Name of contract 1",
        "status": "A"
      },
      {
        "contractCode": "Code 2",
        "contractName": "Name of contract 2",
        "status": "A"
      },
      {
        "contractCode": "Code 3",
        "contractName": "Name of contract 3",
        "status": "A"
      }
    ]
  };
}

<input type="checkbox" name="code" id="code1" value="Code 1">
<label for="code1">Code 1</label>

<input type="checkbox" name="code" id="code2" value="Code 2">
<label for="code2">Code 2</label>

<input type="checkbox" name="code" id="code3" value="Code 3">
<label for="code3">Code 3</label>

<input type="button" value="Try it" onclick="demo()">

---

fetch('API LINK')
  .then(response => response.json())
  .then(data => makeContract(data.contracts))
  .catch(error => console.log(`Oh no! ${error}`));

const makeContract = contracts => {
  const body = document.getElementById('contractCode');
  const include = Array.from(document.querySelectorAll('[name=code]:checked')).map(e=>e.value);
  contracts.forEach(contract => {
    if (!include.includes(contract.contractCode)) { return; }
    const htmlTemplate = `
      <option>${JSON.stringify(contract.contractCode).slice(1, -1)}</option>
    `;
    body.innerHTML += htmlTemplate;
  });
};