如何在网页中展示API返回的汇率对象所有值？

你现在的问题是直接把 data.rates 这个对象赋值给 innerText，JavaScript 会把对象转换成默认的字符串表示 [object Object]，所以看不到具体的汇率数据。要展示所有汇率，需要遍历这个对象的键值对，逐个生成可展示的内容。

修改方案： #

1. 先获取存放汇率的容器元素，每次请求前清空旧内容，避免多次点击后内容叠加。
2. 使用 Object.entries(data.rates) 将汇率对象转换成包含「币种-汇率」键值对的数组。
3. 遍历数组，为每一组数据创建HTML元素（比如列表项或div），然后添加到容器中。

修改后的完整代码： #

document.querySelector("button").addEventListener("click", getCoin); 

function getCoin(){
    let coin = document.querySelector("input").value.trim(); // 用trim()更简洁地去除前后空格
    console.log(coin)
    
    fetch("https://open.er-api.com/v6/latest/" + coin)
    .then (res => res.json())
    .then (data => {
      console.log(data.rates)
      
      document.querySelector("#coinName").innerText = data.base_code
      document.querySelector("#coinProvider").innerText = data.provider
      document.querySelector("#coinTime").innerText = data.time_last_update_utc
      document.querySelector("#coinProxTime").innerText = data.time_next_update_utc
      
      // 处理汇率展示
      const ratesContainer = document.querySelector("#coinRates");
      ratesContainer.innerHTML = ""; // 清空旧内容
      
      // 遍历所有汇率键值对，用div展示
      Object.entries(data.rates).forEach(([currency, rate]) => {
          const rateItem = document.createElement("div");
          rateItem.textContent = `${currency}: ${rate}`;
          rateItem.style.margin = "4px 0"; // 可选：添加间距让内容更清晰
          ratesContainer.appendChild(rateItem);
      });

      // 如果你想用列表展示，可替换成下面这段代码：
      // ratesContainer.innerHTML = "<ul></ul>";
      // const list = ratesContainer.querySelector("ul");
      // Object.entries(data.rates).forEach(([currency, rate]) => {
      //     const li = document.createElement("li");
      //     li.textContent = `${currency}: ${rate}`;
      //     list.appendChild(li);
      // });
    })
    .catch(err => console.log("请求出错：", err)); // 建议加上错误捕获，方便调试
}

对应的HTML建议： #

确保页面里有合适的容器存放汇率内容，比如：

<div id="coinRates"></div>
<!-- 或者用列表容器 -->
<ul id="coinRates"></ul>

修改后点击按钮就能看到所有币种对应的汇率值了。另外把你原来的split(" ").join(" ")换成了trim()，可以更高效地去除输入内容的前后空格，避免无效请求。

内容的提问来源于stack exchange，提问作者JAN BONCOMPTE BOSA