如何从 angularjs http 回调中查看 json 数据？答案

【问题标题】：How to view json data from angularjs http callback?如何从 angularjs http 回调中查看 json 数据？
【发布时间】：2015-08-10 21:34:59
【问题描述】：

我可以在控制台中看到我的 json 数据，我想在 clickbutton 功能后在 html 页面上查看它。据我了解，我可以做一个承诺（$q），也可以用 http 或 ngResource。首先我想做http然后迁移到ngResource。由于某种原因，我的范围仍未定义。也许我错过了一个 ng-init 或 ng-repeat ？有什么想法吗？

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

  app.factory('httpq', function($http, $q) {
  return {
    get: function() {
      var deferred = $q.defer();
      $http.get.apply(null, arguments)
      .success(deferred.resolve)
      .error(deferred.resolve);
      return deferred.promise;
    }
  }
});

  app.controller('myController', function($scope, httpq) {

  httpq.get('http://localhost:8080/states')
  .then(function(data) {
    $scope.returnedData = data;
  })

  $scope.clickButton = function() {
      $scope.returnedData;
}

});

查看

   <div data-ng-controller="myController">
        <button data-ng-click="clickButton()">Get Data From Server</button>
        <p>JSON Data : {{returnedData}}</p> 

    </div>

【问题讨论】：

我会建议你在 angualr 中使用 ajax 服务。
你知道如何接受答案meta.stackexchange.com/questions/5234/…

标签： javascript json angularjs

【解决方案1】：

使用 Ajax 调用

服务：

var demoService = angular.module('demoService', [])
.service('myService',['$http', function($http) {

    this.getdata = function(entity){
        var promise = $http({
            method : 'POST',
            url : 'services/entity/add',
            data : entity,
            headers : {
                'Content-Type' : 'application/json'
            },
            cache : false
        }).then(function (response) {
            return response;
        });
        return promise;     
    };
}]);

控制器：

var demoService = angular.module('demoService', [])
.controller('myctr',['$scope','myService',function($scope,myService){
   myService.getdata().then(function(response){
            //Success

        },function(response){

            //Error         
        });

}]);

现在您可以在控制器中看到您的 json 成功

【讨论】：

谢谢 Keval 我会试试看的。
您也可以使用 .factory 而不是 .service 这只是一个工作示例：D

【解决方案2】：

$http 本身就是一个promise，不需要创建一个新的promise。只需返回 $http.get wihoit 那里写的成功，并在控制器本身中正确地成功 fn。所以你的代码看起来像这样：

app.factory('httpq', function($http) {
   return {
       get: function() {
          return $http.get.apply(null, arguments);
       }
   }
});

你的控制器：

app.controller('myController',  function($scope, httpq) {
      httpq.get('http://localhost:8080/states').then(function(data) {
   $scope.returnedData = data;
 })

  $scope.clickButton = function() {
      $scope.returnedData;
  }

 });

【讨论】：

谢谢 V. 那行得通。快速提问。当有人为您的问题提供解决方案时，我应该回答我自己的问题吗？有没有办法将问题标记为完成？
是的，左边的答案有一个勾号，只需点击它
如果你在谈论向上和向下箭头，我的声誉还不够高。猜猜我要等吗？谢谢。我必须阅读stackoverflow的规则。也许先找到一些基本的java问题来回答。
您可以将此答案标记为已接受，方法是单击箭头下方此答案旁边的勾号

【解决方案3】：

使用

$scope.returnedData=JSON.parse(data);

它将为您提供 JSON 格式的值

【讨论】：

【解决方案4】：

我没有与 promise 合作过。但是您的工厂代码似乎没问题。

在控制器中首先声明你的对象。

如果只是对象，则声明为

$scope.returnedData = {};

如果是数组，声明为

$scope.returnedData = [];

对象不会是未定义的，更改会影响 HTML

【讨论】：