How to Get Array from $http and view it with ng-repeat

Question

i want to get an array of JSON objects from a return function ,and loop inside this array using ng-repeat , but its not working for me , this is my code :

var app=angular.module("myApp",[]);

app.controller("myController",function($scope,$http){

    $scope.listOfFields=[];

 $scope.getlistOfFieldsByIdTable = function(idTable)
    {
       $http.get("/listOfFieldsByIdTable/"+idTable)
       .success(function(data){

         return data;

       });
    };

});

<!-- first call  -->
<!-- 150 is the id of the table-->
<div class="panel-body" ng-app="myApp" ng-controller="myController">

    <ul ng-init="listOfFields = getlistOfFieldsByIdTable(150)"> 
        <li ng-repeat="field in listOfFields ">
                {{field.name}}
        </li>
   </ul>                           
</div>

<!-- second call  -->

 <div class="panel-body" ng-app="myApp" ng-controller="myController">
    <ul>
        <lib ng-repeat="field in getlistOfFieldsByIdTable(150)">
                      {{field.name}}
        </li>
   </ul>
</div>

the two calls that i used are not working for me, my service works fine when i used a RestClient like "Advanced Rest Client plugin in Google Chrome" can you help me how to call properly my array of objects, and show the results in my HTML page, thanks in advanced.

Answer 1

The problem is with the getlistOfFieldsByIdTable function:

   //WRONG
    $scope.getlistOfFieldsByIdTable = function(idTable)
        {
           $http.get("/listOfFieldsByIdTable/"+idTable)
           .success(function(data){

             return data;
           });
        };

The return data statement returns data to the anonymous function inside the .success method. It does not return data to the parent function. Since no return is specified at the parent level, the value returned is null. A return needs to be done at every level of the nesting.

//BETTER
$scope.getlistOfFieldsByIdTablePromise = function(idTable) {

    var promise = $http.get("/listOfFieldsByIdTable/"+idTable);

    var derivedPromise = promise.then( function onfulFilled(response) {
        var data = response.data;
        //Sets scope value asynchronously
        $scope.listOfFieldsByIdTable = data;
        //return value creates derived promise
        return data;
    };

    return derivedPromise;
};

In this example there is a return statement at every nested level but the final item returned is not a value; it is a promise.

The $http service only returns promises. And the methods attached to a promise object only return promises. Data goes on scope only as a side effect and the operation happens in the future when the XHR completes.

---

in my ng-repeat , i should use listOfFieldsByIdTable or derivedPromise that you used in the return function?

In the ng-repeat directive use the $scope.listOfFieldsByIdTable variable. The ng-repeat directive puts a $watch on the variable which checks for changes every digest cycle and when the data appears (or changes), it updates the DOM.

To do additional processing of the data in the controller, chain from the derived promise.