AngularJS：服务不返回数据

时间：2016-04-15 13:54:19

标签： angularjs json angular-services

我一直在尝试通过AngularJS（1.5.3）中的服务从json文件中获取数据。我无法从json检索数据并在视图中显示它。我得到了空白值。以下是代码：

//Service

angularStoreApp.factory('dataService', ['$http', function ($http, $q) {

    return {
        getProducts: function () {
            var promise = $http.get('/api/json/products.json')        
        .then(function successCallback(response) {
            if (typeof response.data === 'object') {
                return response.data;
            } else {
                // invalid response
                return "Invalid data";
            }
        }, function errorCallback(response) {
            return "Invalid data";
        })
            return promise;
        }
    };
}]);

//Controller

/// <reference path="SearchController.js" />
angularStoreApp.controller('SearchCtrl', ['$scope', 'dataService', function ($scope, dataService) {
      
    $scope.ProductItems = [];
   
    dataService.getProducts()
        .then(function (data) {
            $scope.ProductItems = data;
        });
}]);
<blockquote>
    <h4 style="color: salmon">Welcome to the New Store
    <br />
        Please select the products you want and add them to your shopping cart.
    <br />
        When you are done, click the shopping cart icon to review your order and checkout.
    <br />
    </h4>


  
<div class="row">
    <div class="col-sm-12" ng-repeat="ProductItem in ProductItems track by $index">
        {{ProductItem.Name}}, {{ProductItem.Price}}
    </div>
</div>

更新：

以下是我拥有的json数据。 [{ "itemName": "Notepad", "itemPrice": 12, "itemQuantity": 0 }, { "itemName": "Pen", "itemPrice": 8, "itemQuantity": 0 }, { "itemName": "Pencil", "itemPrice": 5, "itemQuantity": 0 }];

任何人都可以帮助我。

6 个答案:

答案 0 :(得分：1)

我认为问题出在你的第一行！

您应该将所有服务作为字符串传递：

angularStoreApp.factory('dataService', ['$http', '$q' function ($http, $q) {

答案 1 :(得分：1)

为了让代码片段正常工作，您需要

  • 在js：var angularStoreApp = angular.module('storeapp', []);
    • 中初始化模块
  • 在视图中添加ng-app
  • 在视图中添加ng-controller（或使用路由）

忘记将$q添加到依赖项确实是一个错误，但只要您不使用$q，它就不会阻止您的应用运行。

以下是经过调整的有效代码段。我通过返回包含在promise中的json来模拟http调用。如果它仍然无法工作，问题是HTTP调用，即我注释掉的部分。在浏览器中执行调用并验证是否返回了正确的JSON。

＆＃13;
＆＃13; 
var angularStoreApp = angular.module('storeapp', []);

//Service

angularStoreApp.factory('dataService', ['$http', '$q',
  function($http, $q) {

    return {
      getProducts: function() {
        //simulate promise with json:
        return $q.when([{
          'Name': 'name 1',
          'Price': 1.23
        }, {
          'Name': 'name 2',
          'Price': 4.56
        }]);
        //var promise = $http.get('/api/json/products.json')
        // .then(function successCallback(response) {
        //  if (typeof response.data === 'object') {
        //   return response.data;
        // } else {
        // invalid response
        //   return "Invalid data";
        // }
        // }, function errorCallback(response) {
        //   return "Invalid data";
        // })
        // return promise;
      }
    };
  }
]);

//Controller

/// <reference path="SearchController.js" />
angularStoreApp.controller('SearchCtrl', ['$scope', 'dataService',
  function($scope, dataService) {

    $scope.ProductItems = [];

    dataService.getProducts()
      .then(function(data) {
        $scope.ProductItems = data;
      });
  }
]);
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="storeapp" ng-controller="SearchCtrl">
  <blockquote>
    <h4 style="color: salmon">Welcome to the New Store
    <br />
        Please select the products you want and add them to your shopping cart.
    <br />
        When you are done, click the shopping cart icon to review your order and checkout.
    <br />
    </h4>



    <div class="row">
      <div class="col-sm-12" ng-repeat="ProductItem in ProductItems track by $index">
        {{ProductItem.Name}}, {{ProductItem.Price}}
      </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

我已经在jsbin中复制了您的代码，并且由于我为了简洁而更改了代码，因此工作正常。

问题可能出在下面的代码中，因为它在根文件夹中查找不在项目文件夹中的products.json。

$http.get('/api/json/products.json')

尝试删除网址中的“/”。

$http.get('api/json/products.json')

答案 3 :(得分：0)

我在阅读以下链接后找到了答案

http://www.dwmkerr.com/promises-in-angularjs-the-definitive-guide/

http://bguiz.github.io/js-standards/angularjs/resolving-promises-for-a-controller/

以下是我修改代码以使其正常工作的方法：

在配置路由部分中，我使用了该路由的resolve属性

var angularStoreApp = angular.module('AngularStore', ['ngRoute']);
angularStoreApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/products', {
        templateUrl: '/Views/Store.html',
        controller: 'SearchCtrl',
        resolve: {
            resolvedJSON: function (dataService) {
                return dataService.getProducts();
            }
        }
    })
    .when('/product/:productName', {
        templateUrl: '/Views/product.html',
        controller: 'ProductCtrl'
    })
    .otherwise({
        redirectTo: '/products'
    });
}]);

现在我在我的控制器中注入了resolveJSON，如下所示

/// <reference path="SearchController.js" />
angularStoreApp.controller('SearchCtrl', ['$scope', 'resolvedJSON',           function ($scope, resolvedJSON) {
$scope.ProductItems = [];
$scope.ProductItems = resolvedJSON;
}]);

我的服务代码如下：

angularStoreApp.factory('dataService', ['$http', function ($http, $q) {
  return {
    getProducts: function () {
        return $http.get('/api/json/products.json')
           .then(function successCallback(response) {
               return response.data;
           }, function errorCallback(response) {
               return "Invalid data";
           })
    }
};

以下是我的json数据

[{
   "itemName": "Notepad",
   "itemPrice": 12,
   "itemQuantity": 0
},
{
   "itemName": "Pen",
   "itemPrice": 8,
   "itemQuantity": 0
},
{
    "itemName": "Pencil",
    "itemPrice": 5,
    "itemQuantity": 0
}]

我的观点（Store.html）是这样的：

<div class="row">
    <div class="col-sm-12" ng-repeat="ProductItem in ProductItems track by $index">
        {{ProductItem.itemName}}, {{ProductItem.itemPrice}}
    </div>
</div>

希望这可以帮助任何面临类似问题的人。感谢所有引导我做出更好更简单回答的人。

答案 4 :(得分：-1)

  1. 你忘记了＆＃39; $ q＆＃39;缩小
  2. 你应该使用var deferred = $ q.defer（）; //（我会添加一个完整的代码）

  3. 示例jsfiddle 

    angular.module('app', [])
.controller('ctrl', function(dataService, $scope) {
var vm = this;
$scope.ProductItems = [];

dataService.getProducts()
  .then(function(data) {
    $scope.ProductItems = data;
  });
})  
.factory('dataService', ['$http', '$q', function($http, $q) {

function getProducts() {
  var deferred = $q.defer();

  $http.get('https://httpbin.org/get')
    .then(function successCallback(response) {

      if (typeof response.data === 'object') {
        // let say we get list of Products
        deferred.resolve([{
          id: 1,
          name: 'Product1'
        }, {
          id: 2,
          name: 'Product2'
        }, {
          id: 3,
          name: 'Product3'
        }]);
      } else {
        // invalid response
        return "Invalid data";
      }
    }, function errorCallback(response) {
      return deferred.reject("Invalid data");
    })

  return deferred.promise;
}

return {
  getProducts: getProducts
};
 }]);

答案 5 :(得分：-1)

我认为你遇到的问题之一是@Ahmad Mobaraki，而另一个问题在你的dataService中，promise返回的$http.get('/api/json/products.json')对象已被then()消耗1}}函数，所以你需要做的是创建一个新的promise并返回它。

代码示例：

//service
angularStoreApp.factory('dataService', ['$http', '$q', function ($http, $q) {

    return {
        getProducts: function () {
            var defered = $q.defer();

            $http.get('/api/json/products.json')        
                .then(function successCallback(response) {
                    if (typeof response.data === 'object') {
                        defered.resolve(response.data);

                    } else {
                        // invalid response
                        defered.reject("Invalid data");
                    }
                }, function errorCallback(response) {
                defered.reject("Invalid data");
            });
            return defered.promise;
        }
    };
}]);

//Controller
angularStoreApp.controller('SearchCtrl', ['$scope', 'dataService', function ($scope, dataService) {

    $scope.ProductItems = [];

    dataService.getProducts()
        .then(function (data) {
            $scope.ProductItems = data;
        });
}]);

希望这可以帮助你：）

相关问题
最新问题