JayRizla JayRizla - 1 month ago 13
AngularJS Question

Pull data from API into Ionic list

I am trying to pull data from API into Ionic list. It is currently set to GET details of 10 users. ?results=10

When I specify which element within the results array to print all the desired details are printed within the list e.g. {{result.results[0].picture.thumbnail}} but repeats the [0] element 10 times (the length of the array)

When I do not specify which element and try to print the entire array, I receive 10 empty list items.

** I am pretty new to Angular and the Ionic framework, thanks in advance :)

controller.js

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope, $http) {
$scope.result = [];
$http.get('https://randomuser.me/api/?results=10')
.success(function(data, status, headers,config){
console.log('data success');
console.log(data); // for browser console
$scope.result = data; // for UI
})
.error(function(data, status, headers,config){
console.log('data error');
})
.then(function(result){
things = result.data;
});
})


tab-dash.html

<ion-list>
<ion-item ng-repeat="results in result.results"
<ion-avatar item-left>
<img src="{{result.results[0].picture.thumbnail}}">
</ion-avatar>
<h2>
{{result.results.name.first}}
{{result.results[0].name.last}}
</h2>

<p>{{result.results[0].email}}</p>

</ion-item>
</ion-list>

Answer

Try with this:

<ion-list>
  <ion-item ng-repeat="result in result.results" 
    <ion-avatar item-left>
      <img src="{{result.picture.thumbnail}}">
    </ion-avatar>
    <h2>
      {{result.name.first}}
      {{result.name.last}}
    </h2>
    <p>{{result.email}}</p>
  </ion-item>
</ion-list>