CODEWITHSUNDEEP
javascriptjsonangularjsresources
yuro
yuro

Reputation: 2209

$resource responses an empty array in AngularJS

I want to display a table with items from a json data. I've created a Service to return the json data. In my Ctrl I'm doing a query to the Service to receive the Array with the data. It is a bit confused. Because I put the response in a new JS-variable then the JS variable in a scope variable. I'm using the scope variable in the ngRepeat directive in my html file and then it have to displays the data in the table but they don't that.

Service:

myApp.factory('MyService', function ($resource) {
    return $resource('data/mydata.json');
});

Ctrl:

var MyData = MyService.query(function () {
        $log.info('[Result:]', MyData); //console shows the expected data
    });

$scope.datas = MyData;
$log.info('Result2:', $scope.datas); //console shows an empty array

View:

<tr ng-repeat="item in filteredData = (datas | filter:search)>
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
</tr>

Usually the data have to contained in the variable MyData, aren't they?

EDIT: The new problem is, that my list won't sorted. I'm using the orderBy Filter from the angularjs doc website.

Upvotes: 1

Views: 1083

Answers (1)

Zee
Zee

Reputation: 8488

Your

MyService.query....

is async call. JS does not wait for its response and executes the next line which is 

$scope.datas = MyData;

Hence you get empty array.

Change your code to:

var MyData = MyService.query(function () {
    $log.info('[Result:]', MyData); //console shows the expected data
    $scope.datas = MyData;
    $log.info('Result2:', $scope.datas);
});

Upvotes: 4

Related Questions