切换至reqres.in API后用户卡片渲染与搜索功能失效问题

核心问题1：API返回结构不匹配 #

reqres.in的接口返回是嵌套结构，外层对象里的data字段才是用户数组。你直接对整个响应对象调用map，会因为对象没有map方法导致代码报错，卡片自然无法渲染。

修正方式：把data.map改成data.data.map，正确遍历用户数组：

fetch('https://reqres.in/api/users?page=2')
  .then(res => res.json())
  .then(responseData => { // 重命名变量避免混淆
    users = responseData.data.map(user => { // 这里取responseData.data
      const card = userCardTemplate.content.cloneNode(true).children[0]
      const header = card.querySelector('[data-header]')
      header.textContent = user.last_name
      const body = card.querySelector('[data-body]')
      body.textContent = user.first_name
      // 若要显示用户照片，找到卡片内的img元素设置src
      const avatar = card.querySelector('[data-avatar]')
      if (avatar) avatar.src = user.avatar
      userCardContainer.append(card)

      return {
        first_name: user.first_name,
        last_name: user.last_name,
        element: card
      }
    });
  })

核心问题2：缺失搜索事件监听 #

原代码只做了数据渲染，没有绑定搜索输入的事件处理逻辑，导致搜索功能失效。需要添加input事件监听，根据输入内容过滤用户卡片：

searchInput.addEventListener('input', e => {
  const searchTerm = e.target.value.toLowerCase()
  users.forEach(user => {
    const isMatch = user.first_name.toLowerCase().includes(searchTerm) || 
                    user.last_name.toLowerCase().includes(searchTerm)
    user.element.classList.toggle('hidden', !isMatch)
  })
})

同时要在CSS中添加隐藏类：

.hidden { display: none; }

完整修正代码 #

const userCardContainer = document.querySelector('[data-user-cards-container]')
const userCardTemplate = document.querySelector('[data-user-template]')
const searchInput = document.querySelector('[data-search]')

let users = []

fetch('https://reqres.in/api/users?page=2')
  .then(res => res.json())
  .then(responseData => {
    users = responseData.data.map(user => {
      const card = userCardTemplate.content.cloneNode(true).children[0]
      const header = card.querySelector('[data-header]')
      const body = card.querySelector('[data-body]')
      const avatar = card.querySelector('[data-avatar]') // 处理照片显示

      header.textContent = user.last_name
      body.textContent = user.first_name
      if (avatar) avatar.src = user.avatar

      userCardContainer.append(card)

      return {
        first_name: user.first_name,
        last_name: user.last_name,
        element: card
      }
    });
  })

// 绑定搜索事件
searchInput.addEventListener('input', e => {
  const searchTerm = e.target.value.trim().toLowerCase()
  users.forEach(user => {
    const fullName = `${user.first_name} ${user.last_name}`.toLowerCase()
    const isMatch = fullName.includes(searchTerm)
    user.element.classList.toggle('hidden', !isMatch)
  })
})

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