如何从angularjs http回调中查看json数据? [英] How to view json data from angularjs http callback?

问题描述

我可以在控制台中看到我的 json 数据，我想在单击按钮功能后在 html 页面上查看它.根据我的理解，我可以做一个承诺 ($q) 或者使用 http 或 ngResource.首先我想做 http 然后迁移到 ngResource.出于某种原因，我的范围仍未定义.也许这是我缺少的 ng-init 或 ng-repeat?有什么想法吗?

 var app = angular.module('myApp', []);app.factory('httpq', function($http, $q) {返回 {得到:函数(){var deferred = $q.defer();$http.get.apply(null, 参数).success(deferred.resolve).错误(延期.解决)；返回 deferred.promise;}}});app.controller('myController', function($scope, httpq) {httpq.get('http://localhost:8080/states').then(函数(数据){$scope.returnedData = 数据；})$scope.clickButton = function() {$scope.returnedData;}});

查看

 
<button data-ng-click="clickButton()">从服务器获取数据</button><p>JSON 数据:{{returnedData}}</p>

解决方案

使用 Ajax 调用

服务:

var demoService = angular.module('demoService', []).service('myService',['$http', function($http) {this.getdata = 函数(实体){var 承诺 = $http({方法:'POST'，url : '服务/实体/添加',数据:实体，标题:{'内容类型':'应用程序/json'},缓存:假}).then(函数(响应){返回响应；});回报承诺；};}]);

控制器:

var demoService = angular.module('demoService', []).controller('myctr',['$scope','myService',function($scope,myService){myService.getdata().then(function(response){//成功}，功能(响应){//错误});}]);

现在你可以在控制器中看到你的 json success

I can see my json data in the console and I want to view it on html page after clickbutton function. From my understaning I can either do a promise ($q) or then with http or ngResource. First I want to do http then migrate to ngResource. For some reason my scope is still undefined. Maybe it's a ng-init or ng-repeat I'm missing? Any ideas?

  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;
}

});

view

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

    </div>

解决方案

Use Ajax call

Service:

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;     
    };
}]);

Controller :

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

        },function(response){

            //Error         
        });

}]);

now you can see your json in controller success

这篇关于如何从angularjs http回调中查看json数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！