Angular JS- Response from webservice not populating into list

Question

I am very new to Angular JS and Ionic framework .

In services.js file, inside .factory method ,the webservice is invoked and can show the alert with the json response as shown in the screenshot below

But, the list view is not populated. I have tried in the two ways .

Try 01:

Angular JS code

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

.factory('Chats', function($http) {

var chats;


  return {
    all: function() {

  $http.get(url).
  then(function(response) {
      //alert(JSON.stringify(response.data.employee));
      chats=response.data.employee;
      alert(JSON.stringify(chats));
      return chats;
  }, function(error) {
    alert(JSON.stringify(error));

  });
       return chats;
    }

  };
});

HTML5 code

<ion-view view-title="Chats">
  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap">
        <img ng-src="http://findicons.com/files/icons/820/simply_google/256/google_android.png">
        <h2>{{chat.employeeCode}}</h2>
        <p>{{chat.createdBy}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>

        <ion-option-button class="button-assertive" ng-click="remove(chat)">
          Delete
        </ion-option-button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Try 2

In this try I have assigned the chats variable in the same file to the following array,

var chats = [{
    id: 0,
    name: 'Ben Sparrow',
    lastText: 'You on your way?',
    face: 'https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png'
  }, {
    id: 1,
    name: 'Max Lynx',
    lastText: 'Hey, it\'s me',
    face: 'https://avatars3.githubusercontent.com/u/11214?v=3&s=460'
  }, {
    id: 2,
    name: 'Adam Bradleyson',
    lastText: 'I should buy a boat',
    face: 'https://pbs.twimg.com/profile_images/479090794058379264/84TKj_qa.jpeg'
  }, {
    id: 3,
    name: 'Perry Governor',
    lastText: 'Look at my mukluks!',
    face: 'https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png'
  }, {
    id: 4,
    name: 'Mike Harrington',
    lastText: 'This is wicked good ice cream.',
    face: 'https://pbs.twimg.com/profile_images/578237281384841216/R3ae1n61.png'
  }];

var chats = [{
    id: 0,
    name: 'Ben Sparrow',
    lastText: 'You on your way?',
    face: 'https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png'
  }, {
    id: 1,
    name: 'Max Lynx',
    lastText: 'Hey, it\'s me',
    face: 'https://avatars3.githubusercontent.com/u/11214?v=3&s=460'
  }, {
    id: 2,
    name: 'Adam Bradleyson',
    lastText: 'I should buy a boat',
    face: 'https://pbs.twimg.com/profile_images/479090794058379264/84TKj_qa.jpeg'
  }, {
    id: 3,
    name: 'Perry Governor',
    lastText: 'Look at my mukluks!',
    face: 'https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png'
  }, {
    id: 4,
    name: 'Mike Harrington',
    lastText: 'This is wicked good ice cream.',
    face: 'https://pbs.twimg.com/profile_images/578237281384841216/R3ae1n61.png'
  }];

HTML5

<ion-view view-title="Chats">
  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap">
        <img ng-src="https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png">
        <h2>{{chat.name}}</h2>
        <p>{{chat.lastText}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>

        <ion-option-button class="button-assertive" ng-click="remove(chat)">
          Delete
        </ion-option-button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Try 2 is working as well as I have assigned hardcoded json array to the variable . But, Try 1 is not working .

UPDATE:

controller.js

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

.controller('DashCtrl', function($scope) {})

.controller('ChatsCtrl', function($scope, Chats) {
  $scope.chats = Chats.all();
 })

/*.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})*/

.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };
});

Please help me finding the solution .

Where's your controller code? You can't directly access the factory values from your view without a controller — Tom
– Tom, Commented Aug 27, 2015 at 13:35

Tom · Accepted Answer · 2015-08-27 13:44:04Z

3

You're not waiting for the promise to resolve in your controller.

Change your controller call of Chats.all() to:

Chats.all().then(function(chats) {
    $scope.chats = chats;
});

Also, change the all function in your service to:

function all() {
  return $http
           .get(url)
           .then(function(response) {
              chats = response.data.employee;
              return chats;
           }, function(error) {
             alert(JSON.stringify(error));
           });
}

edited Aug 27, 2015 at 13:44

answered Aug 27, 2015 at 13:39

Tom

7,7401 gold badge26 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tom Over a year ago

@RakeshL - check for errors in the console. This wouldn't cause your screen to go black, but maybe ionic framework will do that when there are erros. Make sure you return $http, not just call it

Collectives™ on Stack Overflow

Angular JS- Response from webservice not populating into list

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related