J'ai un contrôleur défini comme suit avec la méthode getEmployeeDetails:

var app = angular.module('app');
app.controller('AppController',[ '$scope', '$http', function($scope, $http) {

    $scope.result = [];
    $scope.getEmployeeDetails = function() {
        var response = $http.get('http://localhost:8080/empMgt/employee/all');
        response.success(function(data, status, headers, config) {
            $scope.result.push(data);
        });
        response.error(function(data, status, headers, config) {
            alert( "Exception details: " + JSON.stringify({data: data}));
        });
    };

    $scope.getEmployeeDetails();
}]);

Cette méthode obtient en retour un objet de résultat contenant une liste d'employés. J'essaye de montrer cette liste dans un tableau dans mon html.

Le html est le suivant:

<body ng-controller="AppController" style="display:none">
    {{result}}
    <table>
        <tr>
            <th>EmployeeId</th>
            <th>ProjectId</th>
            <th>Employee Name</th>
            <th>Employee Address</th>
        </tr>
        <tr ng-repeat="employee in result.listOfEntities">
            <td>{{employee.employeeId}}</td>
            <td>{{employee.projectId}}</td>
            <td>{{employee.employeeName}}</td>
            <td>{{employee.employeeAddress}}</td>
        </tr>
    </table>
</body>

L'objet vient bien dans le html que j'ai imprimé le même. La liste n'est pas itérée dans la ligne du tableau.

Les données renvoyées ressemblent à ceci:

{
    "result": true,
    "resultCode": "SUCCESS",
    "listOfEntities": [{
        "employeeId": "1",
        "projectId": "1",
        "employeeName": "asdfg",
        "employeeAddress": "asdfg",
        "project": null
    }]
}

De l'aide serait appréciée.

0
Salman Kazmi 20 avril 2017 à 16:28

3 réponses

Meilleure réponse

result.listOfEntities n'existe pas, car result est clairement un tableau:

$scope.result = [];
$scope.result.push(data);

J'imagine que vous seriez mieux sans le tableau, et à la place:

$scope.result = data;

Ou même:

$scope.listOfEntities = data.listOfEntities;
ng-repeat="employee in listOfEntities"
2
Buh Buh 20 avril 2017 à 13:41

Vous avez déclaré $scope.result en tant que tableau ($scope.result=[]). Donc result.listOfEntites ne résoudra rien. Selon votre exemple de données, il doit s'agir d'un objet ($scope.result={};) et dans la réponse de votre serveur, vous devez faire $scope.result = data

1
Prerak Sola 20 avril 2017 à 13:43

Pourquoi vous utilisez push ... Nous n'avons pas besoin de pousser, nous pouvons utiliser directement.

var app = angular.module('app',[]);
app.controller('AppController', [ '$scope', '$http', function($scope, $http) {
            $scope.result = [];
$scope.getEmployeeDetails = function() {            
  var data = {
    "result": true,
    "resultCode": "SUCCESS",
    "listOfEntities": [{
        "employeeId": "1",
        "projectId": "1",
        "employeeName": "asdfg",
        "employeeAddress": "asdfg",
        "project": null
    }]
  };
  $scope.result.push(data.listOfEntities[0]);
};
$scope.getEmployeeDetails();
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="app" ng-controller="AppController">
    <div class="wrapper row-offcanvas row-offcanvas-left">
        <!-- Main content -->
        <div class="program-section">
            {{result.listOfEntities}}
            <div class="container">
                <table class="table-striped">
                    <tr>
                        <th>EmployeeId</th>
                        <th>ProjectId</th>
                        <th>Employee Name</th>
                        <th>Employee Address</th>
                    </tr>
                    <tr ng-repeat="employee in result">{{employee}}
                        <td>{{employee.employeeId}}</td>
                        <td>{{employee.projectId}}</td>
                        <td>{{employee.employeeName}}</td>
                        <td>{{employee.employeeAddress}}</td>
                    </tr>
                </table>

            </div>
        </div>
        <!-- ./program-section -->
    </div>
    <!-- ./wrapper -->
</body>
0
Manikandan Velayutham 20 avril 2017 à 13:46