AngularJS: Delay in fetching Data from rest service causing issue in html while using the data

Question

I am developing an angular app using Mongo as DB and Java.

I am trying to fetch the data from the mongo DB when i click the get data button see the code in js bin http://jsbin.com/aRuWInU/2/edit , for my html page see below the code:

<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="/angular.js"></script>
<script src="myscript.js"></script>
<meta charset=utf-8 />
<title>Demo</title>

  </head>

<body ng-controller="MyApp">
    <!--It will fetch data from Mongo Using REST service through 
    the angular factory ConsumptionEngineRESTService-->
    <button type="button" ng-click="getAllData()">Get Data</button>
    <h1>My Demo With filter</h1>
    <div ng-repeat="Maindata in myFilteredKey" class="">
        <h2>{{Maindata}}</h2>
        <div ng-repeat="item in data | filter:{'key':Maindata}">
            <p>My key is {{item.key}}</p>
            <p>My val is {{item.value}}</p>
        </div>

    </div>

</body>
</html>

Issue happens when i fetch data from REST service, Delay in fetching data cause me the issue, such as $scope.data is not populated but that is used in the below for loop to populate the $scope.myFilteredKey array, so my $scope.myFilteredKey array is empty. see the code for myscript.js

myscript.js
    var app = angular.module('myapp', []);

app.controller('MyApp', ['$scope', function($scope,ConsumptionEngineRESTService) {
        $scope.getAllData=function(){
            console.log("hi");
            /*STUB Data: when it is used , code is working perfectly*/
              /* $scope.data = [
                {key:"home",value:"hk1"},
                {key:"home",value:"hk2"},
                {key:"home",value:"hk3"},
                {key:"home",value:"hk4"},
                {key:"product",value:"pk1"},
                {key:"product",value:"pk2"},
                {key:"product",value:"pk3"},
                {key:"product",value:"pk4"},
                {key:"service",value:"sk1"},
                {key:"service",value:"sk2"},
                {key:"service",value:"sk3"},
                {key:"service",value:"sk4"}
            ]; */
            /* Data From REST Service: Issue happens when i fetch data from REST service,
            *Delay in fetching data cause me the issue, such as $scope.data is not populated but
            *that is used in the below for loop to populate the $scope.myFilteredKey array*/
            /*ConsumptionEngineRESTService is a angular factory. uses REST service to fetch from Mongo*/
            $scope.data =ConsumptionEngineRESTService.getAll();
            $scope.myFilteredKey=[];
            for(i=0;i<$scope.data.length;i++){
                if($scope.myFilteredKey.indexOf($scope.data[i].key)==-1){
                    $scope.myFilteredKey.push($scope.data[i].key);
                    console.log($scope.data[i].key);
                }
            }
        }
}]);

Please help me in solving the issue, that i want to populate the $scope.data when the for loop executes as for loop is using the $scope.data. Note:With this question I didn't include the REST service angular factory ConsumptionEngineRESTService.

app.factory("ConsumptionEngineRESTService ", function($resource, $http) {
  var resource = $resource("/rest/:ID ", { ID : "@_ID " },
    {
      'create':  { method: 'POST' },
      'getAll':   { method: 'GET', isArray: true },
      'get':    { method: 'GET', isArray: false },
      'update':  { method: 'PUT' },
      'destroy': { method: 'DELETE' }
    }
  );
  return resource;
});

Please help me in this .thanks For any help in advance.

mnemosyn · Accepted Answer · 2013-10-09 11:32:46Z

1

I assume the ConsumptionEngineRESTService.getAll(); uses angular resource inside?

If that's the case (and also if it's using angular's $http service), you'll have to process your data in a success callback instead. The result of the resource and http methods are mere promises, proxy objects which will contain the data eventually but not right away. Your code should look something like this instead:

$scope.data = ConsumptionEngineRESTService.getAll(function() {
    $scope.myFilteredKey=[];
    // note that you can work with $scope.data in here, because it's been 
    // assigned before
    for(i = 0; i < $scope.data.length; i++) {
        if($scope.myFilteredKey.indexOf($scope.data[i].key)==-1){
            $scope.myFilteredKey.push($scope.data[i].key);
            console.log($scope.data[i].key);
        }
    }
});

If your ConsumptionEngineRESTService doesn't support this callback yet, I suggest you take a closer look at the documentation of angular-resource. The 'cards' example code, line 8, employs the very same pattern.

answered Oct 9, 2013 at 11:32

mnemosyn

46.4k6 gold badges80 silver badges84 bronze badges

:I am using the ngResource for rest, i have updated my question with the factory methos. I don't want to modify the factory method.

Mohamed Hussain
– Mohamed Hussain

10/09/2013 12:51:33
Commented Oct 9, 2013 at 12:51
well, the way I see it your factory creates a regular resource, so the code I posted should work as-is. Does it?

mnemosyn
– mnemosyn

10/09/2013 13:31:32
Commented Oct 9, 2013 at 13:31
I am passing the value of ID in calling the factory method "$scope.data =ConsumptionEngineRESTService.getAll({ID:ID});". is that case will work?

Mohamed Hussain
– Mohamed Hussain

10/09/2013 15:21:20
Commented Oct 9, 2013 at 15:21
huh? why would a getAll method need an id?

mnemosyn
– mnemosyn

10/09/2013 15:33:12
Commented Oct 9, 2013 at 15:33
1

It might be possible to use the promises' then method instead, as described at docs.angularjs.org/api/ng.$q, i.e. $scope.data.then(function() { ... }). That's a bit awkward, however...

mnemosyn
– mnemosyn

10/09/2013 16:16:45
Commented Oct 9, 2013 at 16:16

| Show 3 more comments

Collectives™ on Stack Overflow

AngularJS: Delay in fetching Data from rest service causing issue in html while using the data

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related