Wie bekomme ich Array von $ http und sehe es mit ng-repeat

Question

Ich möchte ein Array von JSON-Objekte von einer Rückkehrfunktion, und loop innerhalb dieses Arrays mit ng-repeat, aber es funktioniert nicht für mich, das ist mein 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> 

die beiden Anrufe, die ich nicht für mich verwendet arbeiten, mein Service funktioniert gut, wenn ich ein RestClient wie „Advanced REST-Client-Plug-in Google Chrome“ verwendet können Sie mir helfen, wie man richtig nennen mein Array von Objekten, und zeigen Sie die Ergebnisse in meiner HTML-Seite, danke in fortgeschrittenen.

Answer 1

Das Problem ist mit der getlistOfFieldsByIdTable Funktion:

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

      return data; 
      }); 
     }; 

Die Anweisung return data gibt Daten an die anonyme Funktion innerhalb der .success-Methode zurück. Es gibt keine Daten an die übergeordnete Funktion zurück. Da auf der übergeordneten Ebene keine Rückgabe angegeben ist, lautet der zurückgegebene Wert null. Eine Rückführung muss auf jeder Ebene der Verschachtelung durchgeführt werden.

//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 diesem Beispiel gibt es eine return Aussage bei jeder verschachtelten Ebene, aber der letzte Punkt zurückgegeben wird kein Wert; es ist ein Versprechen.

Der Dienst $http gibt nur Versprechungen zurück. Und die Methoden, die an ein Versprechungsobjekt angehängt sind, geben nur Versprechungen zurück. Daten gehen auf den Umfang nur als Nebeneffekt und die Operation passiert in der Zukunft, wenn der XHR abgeschlossen ist.

---

in meinem ng-repeat, soll ich listOfFieldsByIdTable oder derivedPromise, die Sie in der Rück Funktion nutzen?

In der ng-repeat Direktive die $scope.listOfFieldsByIdTable Variable verwenden. Die ng-repeat Direktive setzt eine $watch auf die Variable, die bei jedem Digest-Zyklus nach Änderungen sucht und wenn die Daten angezeigt werden (oder sich ändern), aktualisiert sie das DOM.

Um zusätzliche Verarbeitung der Daten in der Steuerung, Kette aus dem abgeleiteten Versprechen zu tun.

Answer 2

Wenn Sie einige asynchrone Operationen durchführen, können Sie nicht Rückkehr Daten, so dass Sie mit Rückrufe Angebote haben und/oderverspricht.

function Service($http) { 

     this.getData =() => { 
     return new Promise((resolve, reject) => { 
      setTimeout(() => { 
      resolve([1,2,3,4,5]); 
      }, 1000); 
     }); 
     } 

    } 

Und dann verwenden Sie diesen Dienst in einem Controller wie folgt aus::

Zum Beispiel können wir einen Service, mit einem Verfahren, das ein Versprechen Rückkehr schaffen

function Controller($scope, Service) { 

    //Initialize our list 
    $scope.list = []; 

    //Call our promise 
    Service.getData().then((response) => { 
     //After 1s, retrieve the data 
     $scope.list = response 
     //Update the bindings 
     $scope.$apply(); 
    }); 

    } 

Sie das sehen können Working Plunker