调用CoinGecko API获取价格报错及价格计算需求求助

错误原因 #

你遇到的Cannot read properties of undefined (reading 'usd')错误，是因为CoinGecko API返回的响应对象中，键名是**steam-exchange**（和你请求的ids参数完全一致），而不是你代码里写的驼峰式steamExchange。用点语法访问带短横线的键会失败，导致response.steamExchange返回undefined，进而无法读取usd属性。

修正后的代码（含计算功能） #

假设你的HTML里有两个用于显示数据的元素：

<div id="steam-exchange"></div>
<div id="steam-exchange-calculated"></div>

修改你的JavaScript代码如下：

// 获取显示原始价格的元素
var steamx = document.getElementById("steam-exchange");
// 获取显示计算后价格的元素
var steamxCalculated = document.getElementById("steam-exchange-calculated");

var settings = {
    "async": true,
    "crossDomain": true,
    "url": "https://api.coingecko.com/api/v3/simple/price?ids=steam-exchange&vs_currencies=usd",
    "method": "GET",
    "headers": {}
};

$.ajax(settings).done(function (response) {
    // 用方括号语法访问带短横线的键
    var usdPrice = response['steam-exchange'].usd;
    // 显示原始价格，保留两位小数提升可读性
    steamx.innerHTML = usdPrice.toFixed(2) + " USD";
    // 计算并显示乘以550后的结果
    var calculatedPrice = usdPrice * 550;
    steamxCalculated.innerHTML = calculatedPrice.toFixed(2) + " USD";
}).fail(function() {
    // 处理API请求失败的情况，避免页面显示异常
    steamx.innerHTML = "获取价格失败";
    steamxCalculated.innerHTML = "计算失败";
});

关键说明 #

• 带特殊字符（比如短横线）的对象键，必须用[]语法访问，不能用点语法。
• 使用toFixed(2)可以将价格格式化为两位小数，优化显示效果。
• 增加.fail()回调处理请求失败场景，提升代码健壮性。

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