如何使用本地JSON文件翻译REST API返回的建筑ID（jQuery）

1. 简化本地翻译文件结构 #

把原有的嵌套结构改成以建筑ID为键、翻译文本为值的极简JSON结构，这样读取和匹配会更高效：

{
  "X_AllAge_EasterBonus4": "Observatorium",
  "其他建筑ID": "对应翻译文本"
}

建议将该文件命名为translations.json，放在本地项目目录中。

2. 修改jQuery代码实现翻译匹配 #

需要先加载本地翻译文件，再请求远程API数据，待两者都加载完成后，将建筑ID对应到翻译文本（无翻译时保留原名称），同时修正原代码中的HTML语法错误：

$(document).ready(function() {
  // 并行加载本地翻译文件和远程API数据
  $.when(
    $.getJSON('translations.json'), // 本地翻译文件路径
    $.getJSON('https://api.foe-helper.com/v1/LegendaryBuilding/list')
  ).done(function(translationsData, apiData) {
    const translations = translationsData[0]; // 获取翻译键值对
    const allBuildings = apiData[0].response.buildings; // 获取API返回的建筑列表

    // 遍历渲染下拉选项
    $.each(allBuildings, function(index, building) {
      // 优先使用翻译文本，无翻译则保留原名称
      const displayName = translations[building.id] || building.name;
      // 生成合法的option HTML（修正原代码的语法错误）
      const optionHtml = `<option id="lgtops-${building.id}" value="${building.id}" data-key="${building.id}">${displayName}</option>`;
      $('.allegebaeude').append(optionHtml);
    });
  }).fail(function() {
    // 处理数据加载失败的情况
    console.error("数据加载失败，请检查文件路径或API连接");
  });
});

关键说明： #

• 用$.when并行加载两个异步请求，确保翻译数据和API数据都准备就绪后再处理，避免异步顺序问题。
• 翻译匹配逻辑：translations[building.id] || building.name，保证有翻译时用翻译内容，无翻译时 fallback 到原名称。
• 修正了原代码中HTML字符串的语法错误（如未闭合的引号、重复的selected属性），同时给option的ID添加唯一后缀，避免DOM元素ID重复问题。

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