Why is my res.data returning an array of objects in AngularJs?

Question

Why is my res.data returning an array of objects in AngularJs?

I've been working on integrating an API with AngularJS and trying to display the data using ng-repeat, but I'm facing challenges in accessing the object's information.

Below is the feedback I received:

(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 am currently only able to access the name by doing `pokemon[0].name`. I attempted to use map to access the array data, but faced difficulties due to being unfamiliar with this version of Angular. Can anyone point out where I might be going wrong?

javascript angularjs

Answer 1

Answer №1

Make sure to assign the array of responses from your API call to $scope.pokemons.

If you simply push the API response into the $scope.pokemons array as is, all the data will be stored under $scope.pokemons[0], making it difficult to iterate through using ng-repeat in your template.

View Working Example Below:

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>

Answer 2

Make sure to assign the array of responses from your API call to $scope.pokemons.

If you simply push the API response into the $scope.pokemons array as is, all the data will be stored under $scope.pokemons[0], making it difficult to iterate through using ng-repeat in your template.

View Working Example Below:

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>

Answer 3

Answer №2

You must use the ng-repeat directive within another ng-repeat.

Here is an example for your reference:

<ul ng-repeat="pokemon in pokemons">
    <li ng-repeat="(key, value) in pokemon">
        <h2>{{ value.name }}</h2>
    </li>
</ul>

Answer 4

You must use the ng-repeat directive within another ng-repeat.

Here is an example for your reference:

<ul ng-repeat="pokemon in pokemons">
    <li ng-repeat="(key, value) in pokemon">
        <h2>{{ value.name }}</h2>
    </li>
</ul>

Why is my res.data returning an array of objects in AngularJs?

Answer №1

Answer №2

Similar questions

Getting the most out of Nexmo with multiple websocket connections

Tips for preventing Unknown event codes in POST request responses

Prevent additional clicks on the image

Assigning values to props in a Vue component

Names picked at random and presented in the innerHTML

Transferring data from Angular to Django form

What is the best way to embed PHP code into a jQuery append using AJAX?

Adding a JavaScript script tag within a React app's ComponentDidMount - a guide

Improve Email Regular Expression to Restrict Consecutive Periods

Issue arised while trying to open Bootstrap modal window due to conflict with surrounding elements

Adjust the cell text overflow based on the width of the table

I am having trouble getting Vue.js to function properly within HTML when using Django. Can someone please lend me a

Is it possible to utilize the key from ng-repeat within a model for another purpose?

Utilize AJAX/JS and Django to seamlessly upload files

Passing arguments to the callback function in React: a comprehensive guide

Creating input fields using Vuejs

Is there a way to prevent the Alt+F4 function from closing tabs in the Internet Explorer browser

Concealing option value based on ng-if conditions in AngularJS: A guide

Creating a component in Vue to showcase Axios, based on a straightforward example from the documentation

HTML5 Canvas Border