Estoy tratando de consumir una API con angularjs y repetir los datos con ng-repeat pero tengo problemas para acceder a los datos del objeto.
esta es la retroalimentación que estoy recibiendo.
(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {… }, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {nombre: 'bulbasauro', URL: 'https://pokeapi.co/api/v2/pokemon/1/'}
1: {nombre: 'ivysaur', URL: 'https://pokeapi.co/api/v2/pokemon/2/'}
2: {nombre: 'venusaur', URL: 'https://pokeapi.co/api/v2/pokemon/3/'}
3: {nombre: 'charmander', URL: 'https://pokeapi.co/api/v2/pokemon/4/'}
...y más
$$hashKey: "objeto: 3" longitud: 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>solo puedo acceder al nombre si hago pokemon[0].name. Intenté usar el mapa pero no pude acceder a los datos de la matriz y no estoy muy familiarizado con esta versión de angular, ¿dónde me equivoco?
Debes asignar la matriz de respuesta de tu api a $scope.pokemons .
Si empuja la respuesta de la API a la matriz $scope.pokemons como lo hizo ahora, su respuesta completa se ubicará en la $scope.pokemons[0] , de modo que no pueda repetirla usando ng-reeat en la plantilla.
violín de trabajo
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>Necesitas ng-repeat en ng-repeat .
Por favor refiérase:
<ul ng-repeat="pokemon in pokemons"> <li ng-repeat="(key, value) in pokemon"> <h2>{{ value.name }}</h2> </li> </ul>