Question

我在大学项目中使用angularJs（前端）和spring boot（后端）。

我想将来自服务器的结果打印为＆＃34;设备名称＆＃34;列表。

这是我的Json回应。

[{"deviceId":5,"deviceName":"test1","hardwareId":"0A0027000008 ","isActive":true,"deviceIp":"192.168.2.22","creationDate":"2018-02-19T05:24:12.000+0000","lastModifiedDate":"2018-02-19T05:24:12.000+0000","customer":{"customerId":1,"customerName":"gjhvjhvh","email":"default@gmail.com","password":"$2a$10$6XkgjN3DUPwrYbsGRcPW8Obe1UPK1jZ1fkDe9EaMQNkd5IKZeVwYi","active":true,"creationDate":"2018-02-13T07:52:33.000+0000","lastModifiedDate":"2018-02-13T07:52:33.000+0000","roles":{"id":2,"role":"CUSTOMER"}}},{"deviceId":4,"deviceName":"test1","hardwareId":"0A0027000007 ","isActive":true,"deviceIp":"192.168.2.36","creationDate":"2018-02-19T05:23:57.000+0000","lastModifiedDate":"2018-02-19T05:23:57.000+0000","customer":{"customerId":1,"customerName":"gjhvjhvh","email":"default@gmail.com","password":"$2a$10$6XkgjN3DUPwrYbsGRcPW8Obe1UPK1jZ1fkDe9EaMQNkd5IKZeVwYi","active":true,"creationDate":"2018-02-13T07:52:33.000+0000","lastModifiedDate":"2018-02-13T07:52:33.000+0000","roles":{"id":2,"role":"CUSTOMER"}}}]

这是我的代码，它打印来自服务器的整个结果。

HomeService.js

'use strict';

App.service('HomeService', ['$http', '$q', function($http, $q){


var REST_SERVICE_URI = '/customer';




this.getDeviceList = function getDeviceList(){
    return $http.get(REST_SERVICE_URI + '/get_device_list')

}

}]);

HomeController.js

'use strict';


App.controller('HomeController', ['$scope', 'HomeService', function($scope, HomeService) {


$scope.getDeviceList = function () {
        HomeService.getDeviceList()
          .then (function success(response){ 
              $scope.details = responce.data;
              $scope.errorMessage = '';
          },
          function error(response){
              $scope.errorMessage = 'Error occured!!!';
              $scope.details = response.data.message;
        });
    }

}]);

 <span>
        <button id="button" name="button" class="btn btn-primary"   ng-click="getDeviceList()" >Show Devices</button>
        {{details}}
        {{errorMessage}}
</span>

但我不知道如何过滤Json的回复。

Answer 1

    Suppose this is service call in your application:   
     updatePerson: function() {
                        var url = 'your url';
                        var deferred = $q.defer();
                        $http.get(url).then(function(data) {
                            deferred.resolve(data.data);
                        }, function(error) {
                            deferred.reject(error);
                        });
                        return deferred.promise;
                    },
    Then use it inside controller with factory name (suppose fact is your factory name):
    fact.updatePerson().then(function(data){
      //here data is the response from your server, store it in some scope var
      $scope.responseData= data;
    });
   on UI do..
   <div ng-repeat="item in responseData">{{item.deviceName}}</div>

Answer 2

如果您只查看设备名称，请使用以下代码。

            var devicelist = [];
            for (var i = 0; i < $scope.data.length; i++) {
                devicelist.push($scope.data[i].deviceName);
            }
            console.log(devicelist);

Answer 3

    $scope.getDeviceList = function () {
            HomeService.getDeviceList()
              .then (function success(response){ 
                  $scope.details = [];
                  angular.forEach(response.data, function(value, key) {
                    $scope.details.push(value.deviceName);
                  });
                  $scope.errorMessage = '';
              },
              function error(response){
                  $scope.errorMessage = 'Error occured!!!';
                  $scope.details = response.data.message;
            });
        }

您需要将所需的值推送到数组，然后您可以在ui处迭代值。

    <button id="button" name="button" class="btn btn-primary"   ng-click="getDeviceList()" >Show Devices</button>
        <loop ng-repeat="d in details track by $index">{{d}}<br/></loop>
        {{errorMessage}}

或

而不是改变控制器只改变你的ui

<button id="button" name="button" class="btn btn-primary" ng-click="getDeviceList()" >Show Devices</button> <loop ng-repeat="d in details track by $index">{{d.deviceName}}<br/></loop> {{errorMessage}}

我想打印来自服务器的Json响应 - AngularJs

3 个答案: