AngularJS调用JSON API获取24h_volume_usd字段返回null求助

这个问题我太熟悉了！你碰到的问题本质是JavaScript属性访问的语法规则——当属性名包含连字符（比如24h_volume_usd里的-）时，用点号（.）访问是无效的，因为点号要求属性名是合法的JavaScript标识符（不能包含特殊字符，比如连字符）。

直接修复方案（最快） #

把模板里的表达式改成方括号语法，就能正确访问带连字符的属性：

<div ng-repeat="moeda in moedas">
  24小时交易量：{{ moeda['24h_volume_usd'] }}
</div>

更优雅的进阶方案（属性名转换） #

如果觉得方括号语法不够直观，可以在控制器获取数据后，把带连字符的属性名转换成驼峰式，方便后续模板使用：

// 假设你用$http请求数据
$http.get('https://api.coinmarketcap.com/v1/ticker/?limit=0')
  .then(function(response) {
    // 遍历API返回的数组，转换属性名
    $scope.moedas = response.data.map(function(crypto) {
      return {
        name: crypto.name,
        symbol: crypto.symbol,
        // 把24h_volume_usd转换成驼峰式24hVolumeUsd
        24hVolumeUsd: crypto['24h_volume_usd'],
        priceUsd: crypto.price_usd,
        // 其他需要的属性...
      };
    });
  });

之后模板里就可以用更简洁的点号访问了：

<div ng-repeat="moeda in moedas">
  24小时交易量：{{ moeda.24hVolumeUsd }}
</div>

额外提示：处理空值情况 #

有些加密货币可能没有统计24小时交易量，API会返回null，你可以给个默认值优化显示：

<!-- 用||设置默认文本 -->
24小时交易量：{{ moeda['24h_volume_usd'] || '暂无数据' }}

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