Databases
StackOverflow2013
Postsdbo
POAngularJS: Delay in fetching Data from rest service causing issue in html while using the data
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJS: Delay in fetching Data from rest service causing issue in html while using the data
    text
    copied!<p>I am developing an angular app using Mongo as DB and Java. </p> <p>I am trying to fetch the data from the mongo DB when i click the get data button see the code in js bin <a href="http://jsbin.com/aRuWInU/2/edit" rel="nofollow">http://jsbin.com/aRuWInU/2/edit</a> , for my html page see below the code:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html ng-app="myapp"&gt; &lt;head&gt; &lt;script src="/angular.js"&gt;&lt;/script&gt; &lt;script src="myscript.js"&gt;&lt;/script&gt; &lt;meta charset=utf-8 /&gt; &lt;title&gt;Demo&lt;/title&gt; &lt;/head&gt; &lt;body ng-controller="MyApp"&gt; &lt;!--It will fetch data from Mongo Using REST service through the angular factory ConsumptionEngineRESTService--&gt; &lt;button type="button" ng-click="getAllData()"&gt;Get Data&lt;/button&gt; &lt;h1&gt;My Demo With filter&lt;/h1&gt; &lt;div ng-repeat="Maindata in myFilteredKey" class=""&gt; &lt;h2&gt;{{Maindata}}&lt;/h2&gt; &lt;div ng-repeat="item in data | filter:{'key':Maindata}"&gt; &lt;p&gt;My key is {{item.key}}&lt;/p&gt; &lt;p&gt;My val is {{item.value}}&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>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</p> <pre><code>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&lt;$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); } } } }]); </code></pre> <p>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 <code>ConsumptionEngineRESTService</code>.</p> <pre><code>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; }); </code></pre> <p>Please help me in this .thanks For any help in advance.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload