调用FEC REST API返回undefined列表问题求助

我一眼就看出问题所在啦——你没找准FEC API返回数据里的候选人列表位置！

问题根源 #

你之前用的Ghibli API（比如https://ghibliapi.herokuapp.com/films）直接返回的是数组格式的数据，所以直接遍历data没问题。但FEC API返回的是一个包含多个字段的对象，候选人数据实际嵌套在results这个数组里。

看看你提供的FEC JSON结构：

{
  "api_version": "1.0",
  "pagination": { "pages": 1, ... },
  "results": [
    { "election_years": [2008,2016], "name": "SANDERS, BERNARD", ... }
  ]
}

你现在的代码是遍历整个data对象，也就是依次处理api_version、pagination、results这些键对应的值，这些值里只有results数组里的元素才有name属性，其他都没有，所以自然显示undefined。

修正方案 #

把遍历的对象改成data.results，这样就能正确拿到每个候选人的对象了，同时顺便修复一下页面结构里的小错误（你的ul#candidates后面写了</p>，应该是</ul>）。

修正后的JS代码：

$.getJSON("https://api.open.fec.gov/v1/candidates/totals/?office=P&election_full=false&per_page=20&cycle=2020&min_receipts=100000&sort_null_only=false&sort_nulls_last=false&page=1&sort_hide_null=false&api_key=MYKEYISHERE", function(data) {
  console.log(data);
  // 遍历data.results数组，而不是整个data对象
  $.each(data.results, function(i, item){
    $('ul#candidates').append('<li>'+item.name+'</li>');
  });
});

修正后的页面结构片段：

<body>
  <div class="cand-container">
    <img class="photo">
    <ul id="candidates"></ul> <!-- 这里把</p>改成</ul> -->
    <p class="receipts"></p>
  </div>
</body>

这样修改后，就能正确渲染出候选人的姓名列表啦！

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