如何使用JavaScript XHR替换Web端JSON文件中的指定字段值？

我来帮你搞定这个字段替换的需求，直接上修改后的完整代码，再拆解开讲清楚逻辑：

// 第一步：定义替换映射表，把需要替换的id和对应文本整理在这里
const replacementMap = {
  line_id: {
    26007: "Setagaya Line"
  },
  station_id: {
    943: "Sangenjaya",
    1012: "Setagaya",
    784: "Shimotakaido"
  },
  section_id: {
    217: "Matsubara-Yamasita"
  }
};

// 初始化XHR请求
const xhr = new XMLHttpRequest();
xhr.open('GET', 'setagaya.json', true);

xhr.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // 解析返回的JSON数据
    let data = JSON.parse(this.responseText);

    // 第二步：处理字段替换逻辑
    // 假设返回的data是数组形式的条目集合，如果是单个对象就直接处理
    if (Array.isArray(data)) {
      data = data.map(item => {
        // 检查并替换line_id
        if (replacementMap.line_id.hasOwnProperty(item.line_id)) {
          item.line_id = replacementMap.line_id[item.line_id];
        }
        // 检查并替换station_id
        if (replacementMap.station_id.hasOwnProperty(item.station_id)) {
          item.station_id = replacementMap.station_id[item.station_id];
        }
        // 检查并替换section_id
        if (replacementMap.section_id.hasOwnProperty(item.section_id)) {
          item.section_id = replacementMap.section_id[item.section_id];
        }
        return item;
      });
    } else {
      // 如果是单个对象的情况
      if (replacementMap.line_id.hasOwnProperty(data.line_id)) {
        data.line_id = replacementMap.line_id[data.line_id];
      }
      if (replacementMap.station_id.hasOwnProperty(data.station_id)) {
        data.station_id = replacementMap.station_id[data.station_id];
      }
      if (replacementMap.section_id.hasOwnProperty(data.section_id)) {
        data.section_id = replacementMap.section_id[data.section_id];
      }
    }

    // 第三步：这里放你原本的渲染逻辑，比如把处理后的data插入到DOM中
    console.log('处理后的数据:', data);
    // 举个渲染例子：document.getElementById('result').textContent = JSON.stringify(data, null, 2);
  } else {
    console.error('请求出错，状态码:', this.status);
  }
};

xhr.onerror = function() {
  console.error('请求失败');
};

xhr.send();

关键逻辑说明： #

• 替换映射表：把所有需要替换的规则集中放在replacementMap里，后续如果要加新的替换项，直接在这个对象里添加就行，不用动核心逻辑代码，维护起来超方便。
• 数据处理分支：考虑了返回数据是数组或单个对象两种情况，确保不管接口返回哪种结构都能正常处理。
• 安全检查：用hasOwnProperty检查当前id是否在映射表里有对应值，避免替换不存在的id时出现错误。

你只需要把代码里的渲染部分替换成你原本的渲染逻辑就可以直接用啦～

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