Data not rendering in the view

1

Hi

I am new to ionic and trying to create a simple tabs view with one tab as a starting point. I have a service which fetches data from a rest service and it is linked to a controller which feeds the data to the view. I am able to see that the rest API is returning data but it is getting shown as empty in the view. Can someone help how to debug this?

I am pasting my app.js, controller and service code below

tab summary View

<ion-view view-title="Helpers">
  <ion-content>
{{items}}
  </ion-content>
</ion-view>

controller code -

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

.controller('SummaryCtrl', function($scope, summary) {

  $scope.items = { a: summary.getSummary()};
  
});

service:

angular.module('starter.services', [])
  .factory('summary', function($http) {
    var entities = [];

    return {
      getSummary: function() {
        return $http.get("http://www.yocancan.com/entity?count=50").then(function(response) {

          response.data.forEach(function(element) {
            entities.push({
              name: element.Name
            });
          }, this);
          return entities;
        });
      }

    };
  });

app.js :

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

  // Each tab has its own nav history stack:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-Summary.html',
        controller: 'SummaryCtrl'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});

Index.html has following body definition

  <body ng-app="starter">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view></ion-nav-view>
  </body>
2

You can’t just output object data like that. You can do this with primitive variables but again not with objects.

Let’s say this is your items object:

$scope.items = { a: summary.getSummary()};

You can output it like this:

<ion-view view-title="Helpers">
  <ion-content>
{{items.a}}
  </ion-content>
</ion-view>

My advice, go through this video tutorial on AngularJS:

It perfectly describes everything you need to know.

Also, please next time format your code :smile:

3

Thank You - This was very helpful