You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

AngularJS中res.data返回对象数组,ng-repeat无法访问对象属性怎么办?

问题原因及修复方案

核心错误为数组赋值逻辑问题,优先排查此项

  • 数组赋值方式错误

你代码中的res.data.results本身就是包含20个宝可梦对象的一维数组,而你使用$scope.pokemons.push(pokemon)的逻辑,会把整个20项的数组作为单个元素塞入$scope.pokemons,最终得到的是二维数组结构:[ [ {name:'bulbasaur',...}, {name:'ivysaur',...}, ... ] ]。
这就导致ng-repeat遍历时拿到的每个pokemon是外层数组的项(也就是内部完整的20元素数组),自然需要加[0]才能访问到具体对象的属性。
修复代码:

// 不需要push,直接赋值即可
$scope.pokemons = pokemon;
// 如果后续需要合并多次请求的结果,可以用展开运算符
// $scope.pokemons.push(...pokemon);
  • 模块名不匹配错误

JS中定义的模块名为Pokedex,但HTML里ng-app属性写的是myapp,两者不一致会导致AngularJS初始化失败,无法加载控制器逻辑。
修复代码:

<body ng-controller="myController" ng-app="Pokedex">
  • 接口请求地址语法错误

当前请求地址https://pokeapi.co/api/v2/pokemon/?offset={qtd存在语法问题,{qtd是未替换的模板变量,会导致接口请求失败。可以替换为实际需要的偏移参数,比如获取前20条可写为:

$http.get('https://pokeapi.co/api/v2/pokemon/?offset=0&limit=20')

修复以上问题后,原有{{ pokemon.name }}写法即可正常渲染对应属性。

内容的提问来源于stack exchange,提问作者guilherme augusto

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.24 15:06:04