使用Free NBA API时遇.forEach is not a function错误求解决方案

云上老周

2026-8-23

解决Free NBA API调用中的.forEach is not a function错误

核心问题

你直接对API返回的response对象调用.forEach()，但从示例响应能明确看到：API返回的是一个包含data数组和meta元信息的对象，球队数据数组实际嵌套在response.data字段中，直接对非数组的对象使用数组方法必然报错。

修正步骤

访问正确的数组字段：将response.forEach改为response.data.forEach，目标操作数组而非外层响应对象。
修复DOM选择器错误：原代码const $teamDropDown = ("$teamDropDown");缺少jQuery选择器前缀，应改为const $teamDropDown = $("#teamDropDown");，否则无法正确获取下拉框元素。
修正箭头函数语法：forEach (teamObject) => {存在语法错误，正确写法为forEach(teamObject => {（箭头函数参数与箭头间无需括号分隔）。

修正后的完整代码

const app = {};

// 修复jQuery选择器
const $teamDropDown = $("#teamDropDown");
const $playerDropDown = $("#playerDropDown");

// 填充球队下拉框函数
app.populateTeamDropDown = () => {
  
  $.ajax({
    url: 'https://free-nba.p.rapidapi.com/teams',
    method: 'GET',
    dataType: 'json',
    headers: {
      'X-RapidAPI-Key': 'f8bbeecee3mshd11af53a602b7fcp133f59jsn3b4ffb3f20df',
      'X-RapidAPI-Host': 'free-nba.p.rapidapi.com'
    }
  }).then( (response) => { 
    // 遍历response中的data数组
    response.data.forEach(teamObject => {
      const teamName = teamObject.full_name;
      // 将球队名称添加到下拉框
      $teamDropDown.append(`<option value="${teamObject.id}">${teamName}</option>`);
    });
  }).catch(error => {
    // 添加错误捕获，便于排查请求问题
    console.error('请求失败:', error);
  });
}

app.init = () => {
  app.populateTeamDropDown();
}

$(function() {
  app.init();
});