如何在JS中根据ID从JSON文件获取对应的name值

先假设你已经把JSON内容解析成了JavaScript对象（如果是从外部文件读取的，后面会补充说明），以下是几种简单实用的方法：

方法一：使用find()方法（推荐，代码简洁） #

find()是数组的内置方法，会遍历数组并返回第一个满足条件的元素，找不到则返回undefined。

// 先定义解析后的JS对象
const jsonData = {
    "data": [
        {
            "id": "1",
            "name": "name1"
        },
        {
            "id": "2",
            "name": "name2"
        }
    ]
};

// 封装成函数，传入目标ID就能获取name
function getNameById(targetId) {
    const matchedItem = jsonData.data.find(item => item.id === targetId);
    // 找到就返回name，没找到就提示未找到
    return matchedItem ? matchedItem.name : "未找到对应名称";
}

// 调用示例
console.log(getNameById("1")); // 输出：name1
console.log(getNameById("3")); // 输出：未找到对应名称

方法二：用forEach()遍历数组（适合新手理解遍历逻辑） #

如果觉得find()有点抽象，可以用最基础的遍历方式逐个检查：

function getNameById(targetId) {
    let targetName = "未找到对应名称";
    jsonData.data.forEach(item => {
        if (item.id === targetId) {
            targetName = item.name;
        }
    });
    return targetName;
}

// 调用示例
console.log(getNameById("2")); // 输出：name2

补充：从外部JSON文件读取数据的情况 #

如果你的JSON是单独的文件（比如data.json），在浏览器里可以用fetch读取并解析，这里以浏览器环境为例：

fetch('./data.json')
  .then(res => res.json()) // 把返回的内容解析成JS对象
  .then(parsedData => {
      // 在这里处理解析好的数据
      const item = parsedData.data.find(item => item.id === "1");
      console.log(item?.name); // 用可选链操作符避免找不到时报错
  })
  .catch(err => console.log('读取文件出错：', err));

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