JavaScript读取JSON API时动态设置变量问题求助

嘿，我懂你现在的困扰！你想用下拉框选中的值来动态读取JSON里对应的属性，但用点语法的话只会输出变量本身对吧？这是因为JavaScript里的点语法只能用固定的属性名字面量，而要通过变量来访问属性，得用方括号语法才行。

核心解决方法 #

把你原来的 data.clp.name 改成 data[你的变量名].name，这样就能用变量动态替换属性名了。

完整代码示例 #

我给你写个完整的实现例子，你可以参考着调整：

<!-- 假设你的下拉框是这样的 -->
<select id="currencySelect">
  <option value="clp">智利比索</option>
  <option value="usd">美元</option>
  <option value="eur">欧元</option>
</select>

<script>
// 获取下拉框元素
const currencySelect = document.getElementById('currencySelect');

// 监听下拉框的选择变化事件
currencySelect.addEventListener('change', async () => {
  // 获取选中的值
  const selectedCurrency = currencySelect.value;
  
  try {
    // 从API获取JSON数据
    const response = await fetch('你的API接口地址');
    const data = await response.json();
    
    // 用方括号语法动态访问属性
    if (data[selectedCurrency]) {
      const currencyName = data[selectedCurrency].name;
      console.log('当前选中的货币名称:', currencyName);
      // 这里可以把值渲染到页面上，比如 document.getElementById('result').textContent = currencyName;
    } else {
      console.warn(`找不到对应的数据：${selectedCurrency}`);
    }
  } catch (error) {
    console.error('获取数据出错了:', error);
  }
});
</script>

注意事项 #

• 确保下拉框的 value 属性值和JSON里的属性名完全一致（JavaScript是大小写敏感的哦，比如clp和CLP会被当成不同的属性）。
• 加个判断 if (data[selectedCurrency]) 可以避免当选中的值在JSON里不存在时出现报错。

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