如何将卡片固定URL中的aaa替换为JSON搜索结果的url字段

当前通过搜索栏生成的卡片，所有链接均为固定值 https://www.url.com/aaa，需要将每个链接中的 aaa 替换为对应JSON数据里的 url 字段值。

修改后的完整代码 #

JavaScript #

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

let users = []

searchInput.addEventListener("input", e => {
  const value = e.target.value.toLowerCase()
  const xy = value.split(' ')

  users.forEach(user => {
    if (value.length < 3) {
      user.element.classList.toggle("hide", true)
    } else {
      const distance = Math.sqrt(
        Math.pow(parseFloat(xy[0]) - parseFloat(user.x), 2) +
        Math.pow(parseFloat(xy[1]) - parseFloat(user.y), 2)
      )
      const isVisible = user.name.toLowerCase().includes(value) || distance <= 10
      user.element.classList.toggle("hide", !isVisible)
    }
  })
})

fetch("https://ucc.ar/_clusters/test.json")
  .then(res => res.json())
  .then(data => {
    users = data.map(user => {
      const card = userCardTemplate.content.cloneNode(true).children[0]
      const header = card.querySelector("[data-header]")
      const body = card.querySelector("[data-body]")
      // 获取卡片内的链接元素并替换href
      const link = card.querySelector("a")
      link.href = `https://www.url.com/${user.url}`
      
      header.textContent = user.name
      body.textContent = user.company
      card.classList.add('hide');
      userCardContainer.append(card)
      
      return {
        name: user.name,
        x: user.x,
        y: user.y,
        url: user.url,
        element: card
      }
    })
  })

CSS #

.search-wrapper {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

input {
  width: 80%;
  margin: 0 auto;
  display: block;
  padding: 12px 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 18px;
  background-color: #ffffff;
}

.user-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .25rem;
  margin-top: 1rem;
}

.card {
  border: 1px solid black;
  background-color: white;
  padding: .5rem;
  text-align: center;
}

.card>.header {
  margin-bottom: .25rem;
}

.card>.body {
  font-size: .8rem;
  color: #777;
  font-weight: bold;
}

.hide {
  display: none;
}

HTML #

<div class="search-wrapper">
  <input type="search" id="search" placeholder="搜索目录" data-search>
</div>
<div class="user-cards" data-user-cards-container></div>
<template data-user-template>
  <div class="card">
    <a href="https://www.url.com/aaa">
      <div class="header" data-header></div>
    </a>
    <div class="body" data-body></div>
  </div>
</template>

修改说明 #

1. 在遍历JSON数据生成卡片的逻辑中，新增代码获取卡片内的<a>元素
2. 使用模板字符串将固定URL中的aaa替换为当前用户数据里的url字段值
3. 可选：在返回的user对象中保存url属性，方便后续如果需要修改链接时直接调用

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