Data is not populated in LIST

I have a question regarding ionic factory and also controller. Ive googled hard for the solution but cant find what is worng with my code. File service.js

code :

 .factory('ChannelService', function($http)
{
  
 var channel = [];
    return {
        all: function(){
          return $http.jsonp('http://localhost/anugerahtvapi/table_channel?callback=JSON_CALLBACK').then(function(response)
          {
            channel = response;
            console.log(response);
            return channel;
          })
              
            
        },
        getId: function(channelid){

            return channel[channelid-1];
        }
    }


});

and file controller.js
code :

.controller('VideoListCtrl', function($scope,ChannelService) {
   $scope.menus = ChannelService.all();

})

and lastly the html part :

<ion-view title="Video List" ng-controller="VideoListCtrl">
	<ion-content>
            <ul class="list"  >
              <li ng-repeat="menu in menus">
                <a class="item" menu-close nav-clear href="#/channel/{{menu.id}}">{{menu.title}}</a>
              </li>
              
            </ul>
          </ion-content>
</ion-view>

The data is not populated at all. Just blank page. Is there anything wrong here? Thanks for the help. Im totally lost.

@mrar85 Are you sure that the data is coming from the service .Please print some log on controller to get the $scope.menus length.

When i console.log($scope.menus) in the controller the object return is object:catch finally then. I dont understand. Isnt it supposed to return the json object itself. Note that i console.log after i made the call $scope.menus = ChannelService.all();

@mrar85 hey it seems you are assigning the web service response into an channel array.if your are putting response data into an array you have use array.push[].

if the response is an direct array object you can do like this or else you need to parse the arrayobject and then push it into the channel array then return this in all function().

for(var i=0;i<response.length;i++)
{
   channel.push[{id:response[i].id,title:response[i].title}];
}

Hi thamil. did you mean something like this?

return {
        all: function(){
          return $http.jsonp('http://localhost/anugerahtvapi/table_channel?callback=JSON_CALLBACK').then(function(response)
          {
            channel = response.data;
            console.log(channel);
            for(var i=0;i<response.data.length;i++)
            {
               channel.push[{id:response.data[i].id,title:response.data[i].title}];
              
            }
            return channel;
          })
                  
        },
        getId: function(channelid){

            return channel[channelid-1];
        }
    }

@mrar85 Yes Exactly.are you getting now?

But still the data in the controller somehow is not passed. Still nothing. I dont understand . I did push it into an array of channel. But on returning on the controller, nothing happen. The same console.log($scope.menus) still return [object: catch then finally] instead of [object,object] should i change anything in my controller ?

controller.js

.controller('VideoListCtrl', function($scope,ChannelService) {
  
   $scope.menus = ChannelService.all();
   console.log($scope.menus);

})

one more thing if i somehow use

var channel = [{"id":"1","desc":"a collection if data.","btn_desc":" Panel","bg_img":"img\/clouds-bg.jpg","title":"Music","title_img":"img\/logo.png"},{"id":"2","desc":"a collection of data 2","btn_desc":"Panel","bg_img":"img\/channel1-bg.jpg","title":"Bual ","title_img":"img\/logo.png"}];

meaning i just paste in the json directly and just

return {

all : function ()
  {
      return channel;
  }
   
}

the data is populated. Note that i didnt use the http.jsonp method. and the console.log($scope.menus) return [object,object] instead of [object : catch finally then]

@mrar85 hmm I could Understand.Could you try this link

1 Like

Hi thamil. Thank you for the link. Really helpful. For those who have the same problem, below is my solution. It seems that angular js http.jsonp need to use promise to return data in the said array. Hope it helps anyone else that have the same problem as me. Thanx Thamil for the link. Much appreciated

service.js

.factory('ChannelService', function($http, $q) {
  var deffered = $q.defer();
  var data = [];  
  var channel = {};

  channel.async = function() {
    $http.jsonp('http://localhost/anugerahtvapi/table_channel?callback=JSON_CALLBACK')
    .success(function (d) {
      data = d;
      console.log(d);
      deffered.resolve();
    });
    return deffered.promise;
  };
  channel.all = function() { return data; };
  channel.getId =  function(channelid) { return data[channelid]};
  
 return channel;
  
});

and in controller.js

.controller('ChannelCtrl', function($scope, $stateParams,ChannelService)
{
   $scope.channel = ChannelService.getId($stateParams.channelid);
  
})
.controller('VideoListCtrl', function($scope,ChannelService) {
  
   
   ChannelService.async().then(function() {
    $scope.menus = ChannelService.all();
  });

})
1 Like

@mrar85 Great .And Thanks for updating the Solutions too.