Issue
I'm trying to consume an api with angularjs and repeat the data with ng-repeat but I'm having problem accessing the object's data.
this is the feedback i'm getting.
(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {name: 'bulbasaur', url: 'https://pokeapi.co/api/v2/pokemon/1/'}
1: {name: 'ivysaur', url: 'https://pokeapi.co/api/v2/pokemon/2/'}
2: {name: 'venusaur', url: 'https://pokeapi.co/api/v2/pokemon/3/'}
3: {name: 'charmander', url: 'https://pokeapi.co/api/v2/pokemon/4/'}
...and more
$$hashKey: "object:3" length: 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>i can only access the name if i do pokemon[0].name. I tried using the map but I couldn't access the array data and I'm not very familiar with this version of angular, where am I going wrong?
Solution
You need ng-repeat in ng-repeat.
Please refer it:
<ul ng-repeat="pokemon in pokemons">
<li ng-repeat="(key, value) in pokemon">
<h2>{{ value.name }}</h2>
</li>
</ul>
Answered By - Mai Truong
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.