why my res.data returns array of objects ? (AngularJs)-CodePudding

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?

CodePudding user response：

You should assign the response array from your api to $scope.pokemons.

If you push the api response to $scope.pokemons array as you did now, your complete response will be laying under $scope.pokemons[0] location, so that you cant loop it using ng-reeat in template.

Working 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>

CodePudding user response：

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>