如何通过URL SearchParam获取的ID匹配JSON中对应摄影师数据

首先确认你的JSON数据结构，假设是包含多个摄影师对象的数组，每个对象都有唯一的id字段。接下来按以下步骤实现：

1. 确认URL ID的正确获取 #

你已经成功拿到ID，这里再贴一下标准的浏览器端获取方式供参考：

// 提取URL搜索参数中的id
const urlParams = new URLSearchParams(window.location.search);
const targetId = urlParams.get('id');
// 注意：如果你的id是数字类型，记得统一类型，比如执行 parseInt(targetId)

2. 加载并筛选JSON数据 #

方式一：直接导入JSON文件（适用于Vue/React/Vite等前端项目） #

// 导入本地JSON数据文件
import photographers from './photographers.json';

// 筛选匹配ID的摄影师数据
const targetPhotographer = photographers.find(item => item.id === targetId);
// 若JSON中id是数字类型，改用：parseInt(item.id) === parseInt(targetId)

方式二：通过Fetch加载JSON（适用于纯静态页面） #

fetch('./photographers.json')
  .then(res => res.json())
  .then(photographers => {
    const targetPhotographer = photographers.find(item => item.id === targetId);
    // 拿到数据后进行页面渲染
    if (targetPhotographer) {
      // 示例：渲染摄影师姓名
      document.querySelector('.photographer-name').textContent = targetPhotographer.name;
    } else {
      // 处理ID不存在的情况，比如提示“未找到该摄影师”
    }
  })
  .catch(err => console.error('加载JSON失败:', err));

3. 排查常见错误点 #

• 类型不匹配：如果JSON里的id是数字（"id": 1），但URL获取到的是字符串（"1"），用===会匹配失败，需统一类型（都转成字符串或数字）。
• 路径错误：检查JSON文件的加载路径是否正确，控制台若出现404错误就是路径写错了。
• JSON格式非法：JSON不允许写注释，所有键名必须用双引号，可通过在线JSON校验工具检查格式是否合规。

4. 示例渲染代码 #

拿到目标数据后，直接把数据绑定到页面元素：

if (targetPhotographer) {
  document.getElementById('name').textContent = targetPhotographer.name;
  document.getElementById('location').textContent = targetPhotographer.location;
  
  // 渲染照片列表
  const photoList = document.getElementById('photo-list');
  targetPhotographer.photos.forEach(photoUrl => {
    const img = document.createElement('img');
    img.src = photoUrl;
    img.alt = `${targetPhotographer.name}的作品`;
    photoList.appendChild(img);
  });
} else {
  document.body.innerHTML = '<h2>未找到对应摄影师</h2>';
}

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