为什么我的 res.data returns 对象数组? (AngularJs)
why my res.data returns array of objects ? (AngularJs)
我正在尝试使用 angularjs 使用 api 并使用 ng-repeat 重复数据,但我在访问对象数据时遇到问题。
这是我收到的反馈。
(20) [{...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, { …}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {名称: 'bulbasaur', url: 'https://pokeapi.co/api/v2/pokemon/1/'}
1: {名称: 'ivysaur', url: 'https://pokeapi.co/api/v2/pokemon/2/'}
2:{名称:'venusaur',url:'https://pokeapi.co/api/v2/pokemon/3/'}
3: {名称: 'charmander', url: 'https://pokeapi.co/api/v2/pokemon/4/'}
...以及更多
$$hashKey:“对象:3”
长度:20
<script>
angular.module('Pokedex', []).controller('myController', function ($scope, $http) {
$scope.pokemons = []
let getPokemons = function () {
$http.get('https://pokeapi.co/api/v2/pokemon/?offset={qtd')
.then(function (res) {
let pokemon = res.data.results
console.log(pokemon)
$scope.pokemons.push(pokemon)
})
}
getPokemons()
})
</script>
<body ng-controller="myController" ng-app="myapp">
<div>
<ul>
<li ng-repeat="pokemon in pokemons">
<h2>{{ pokemon.name }}</h2>
</li>
</ul>
</div>
如果我做 pokemon[0].name,我只能访问名字。
我尝试使用地图,但我无法访问数组数据,而且我对这个版本的 angular 不是很熟悉,我哪里错了?
您需要 ng-repeat
ng-repeat
。
请参考:
<ul ng-repeat="pokemon in pokemons">
<li ng-repeat="(key, value) in pokemon">
<h2>{{ value.name }}</h2>
</li>
</ul>
您应该将 api 中的响应数组分配给 $scope.pokemons
。
如果像现在一样将 api 响应推送到 $scope.pokemons
数组,您的完整响应将位于 $scope.pokemons[0]
位置下,因此您无法使用 [= 循环它15=] 在模板中。
工作Fiddle
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$scope.pokemons = []
let getPokemons = function () {
$http.get('https://pokeapi.co/api/v2/pokemon/?offset={qtd')
.then(function (res) {
let pokemon = res.data.results
console.log(pokemon)
$scope.pokemons = pokemon;
})
}
getPokemons()
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<ul>
<li ng-repeat="pokemon in pokemons">
<h2>{{ pokemon.name }}</h2>
</li>
</ul>
</div>
</div>
我正在尝试使用 angularjs 使用 api 并使用 ng-repeat 重复数据,但我在访问对象数据时遇到问题。
这是我收到的反馈。
(20) [{...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, { …}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {名称: 'bulbasaur', url: 'https://pokeapi.co/api/v2/pokemon/1/'}
1: {名称: 'ivysaur', url: 'https://pokeapi.co/api/v2/pokemon/2/'}
2:{名称:'venusaur',url:'https://pokeapi.co/api/v2/pokemon/3/'}
3: {名称: 'charmander', url: 'https://pokeapi.co/api/v2/pokemon/4/'}
...以及更多
$$hashKey:“对象:3” 长度:20
<script>
angular.module('Pokedex', []).controller('myController', function ($scope, $http) {
$scope.pokemons = []
let getPokemons = function () {
$http.get('https://pokeapi.co/api/v2/pokemon/?offset={qtd')
.then(function (res) {
let pokemon = res.data.results
console.log(pokemon)
$scope.pokemons.push(pokemon)
})
}
getPokemons()
})
</script>
<body ng-controller="myController" ng-app="myapp">
<div>
<ul>
<li ng-repeat="pokemon in pokemons">
<h2>{{ pokemon.name }}</h2>
</li>
</ul>
</div>
如果我做 pokemon[0].name,我只能访问名字。 我尝试使用地图,但我无法访问数组数据,而且我对这个版本的 angular 不是很熟悉,我哪里错了?
您需要 ng-repeat
ng-repeat
。
请参考:
<ul ng-repeat="pokemon in pokemons">
<li ng-repeat="(key, value) in pokemon">
<h2>{{ value.name }}</h2>
</li>
</ul>
您应该将 api 中的响应数组分配给 $scope.pokemons
。
如果像现在一样将 api 响应推送到 $scope.pokemons
数组,您的完整响应将位于 $scope.pokemons[0]
位置下,因此您无法使用 [= 循环它15=] 在模板中。
工作Fiddle
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$scope.pokemons = []
let getPokemons = function () {
$http.get('https://pokeapi.co/api/v2/pokemon/?offset={qtd')
.then(function (res) {
let pokemon = res.data.results
console.log(pokemon)
$scope.pokemons = pokemon;
})
}
getPokemons()
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<ul>
<li ng-repeat="pokemon in pokemons">
<h2>{{ pokemon.name }}</h2>
</li>
</ul>
</div>
</div>