JavaScript中循环渲染数组或Map的特定索引元素

// ... 原始代码片段
<button>
  ${user.labels.map((label, index) => {
    if (index === 0) {
      return `${label.name}`;
    }
  })}
</button>
<button>
  ${user.labels.map((label, index) => {
    if (index === 1) {
      return `${label.name}`;
    }
  })}
</button>
// ...

// ... 在 fetchData 函数内部，user.map 回调中
const html = test
  .map((user) => {
    // 安全地获取第一个、第二个和第三个标签的名称
    // 使用可选链 ?. 避免访问 undefined 或 null 的属性
    // 使用 || '' 在标签不存在时显示空字符串，避免 undefined 出现在页面
    const firstLabelName = user.labels[0]?.name || '';
    const secondLabelName = user.labels[1]?.name || '';
    const thirdLabelName = user.labels[2]?.name || '';

    return `
      <ul id="myUL">
        <div style="min-height: 50px;">
          <div class="card card-body" style="width: 100%;">
            <li><a href="#">
            ${user.title}
            ${firstLabelName ? `<button>${firstLabelName}</button>` : ''}
            ${secondLabelName ? `<button>${secondLabelName}</button>` : ''}
            ${thirdLabelName ? `<button>${thirdLabelName}</button>` : ''}
            </a></li>  
          </div>
        </div>
      </ul>
    `;
  })
  .join("");
// ...

// ... 在 fetchData 函数内部，user.map 回调中
const html = test
  .map((user) => {
    // 限制只处理前3个标签
    const limitedLabels = user.labels.slice(0, 3); 

    // 动态生成标签按钮
    const labelButtonsHtml = limitedLabels.map(label => `
      <button>${label.name}</button>
    `).join(''); // 使用 join('') 确保生成连续的HTML字符串

    return `
      <ul id="myUL">
        <div style="min-height: 50px;">
          <div class="card card-body" style="width: 100%;">
            <li><a href="#">
            ${user.title}
            ${labelButtonsHtml}
            </a></li>  
          </div>
        </div>
      </ul>
    `;
  })
  .join("");
// ...

function fetchData() {
  fetch("https://api.github.com/repos/vercel/next.js/issues")
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .then((issues) => { // 将 test 改名为 issues 更具语义
      console.log(issues);
      const html = issues
        .map((issue) => { // 将 user 改名为 issue 更具语义
          // 使用解决方案一：直接索引访问和可选链
          const firstLabelName = issue.labels[0]?.name || '';
          const secondLabelName = issue.labels[1]?.name || '';
          const thirdLabelName = issue.labels[2]?.name || '';

          return `
            <ul id="myUL">
              <div style="min-height: 50px;">
                <div class="card card-body" style="width: 100%;">
                  <li><a href="#">
                  ${issue.title}
                  ${firstLabelName ? `<button>${firstLabelName}</button>` : ''}
                  ${secondLabelName ? `<button>${secondLabelName}</button>` : ''}
                  ${thirdLabelName ? `<button>${thirdLabelName}</button>` : ''}
                  </a></li>  
                </div>
              </div>
            </ul>
          `;
        })
        .join(""); // 确保将数组元素连接成一个单一的字符串
      console.log(html);
      // 将内容插入到页面中，假设有一个id为'app'的容器
      document.querySelector("#app").insertAdjacentHTML("afterbegin", html);
    })
    .catch((error) => {
      console.error("Error fetching data:", error); // 使用 console.error 更好地显示错误
    });
}

fetchData();

// 搜索功能保持不变
function myFunction() {
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL"); // 注意：如果页面有多个 ul id="myUL"，这里可能需要更精确的选择器
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}