AngularJS: 服务未返回数据

Question

我一直在尝试通过 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 }];

谁能帮帮我。

Answer 1

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

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

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

Answer 2

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

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

忘记将 $q 添加到依赖项中确实是一个错误，但它不会阻止您的应用程序正常工作，只要您不使用 $q.

下面是经过调整的有效代码片段。我通过返回包含在承诺中的 json 来模拟 http 调用。如果还是不行，那就是 HTTP 调用的问题，也就是我注释掉的部分。在浏览器中执行调用并验证是否返回了正确的 JSON。

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

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

Answer 3

我已经在 jsbin 中复制了您的代码，并且为了简洁起见我更改了代码，但它运行良好。

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

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

尝试删除 URL 中的“/”。

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

Answer 4

你忘记了用于缩小的“$q”
你应该使用 var deferred = $q.defer();//（我会添加完整的代码）

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

Answer 5

我认为你遇到的问题之一已经在@Ahmad Mobaraki 中提及，另一个问题在你的 dataService 中，由 [=13= 编辑的 promise 对象 return ] 已经被 then() 函数消耗，所以你需要做的是创建一个新的 promise 和 return 它。

代码示例：

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

希望对您有所帮助:)

Answer 6

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

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

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

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

在配置路由部分，我为该路由使用了解析属性

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

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

/// <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>

希望这对面临与我类似问题的任何人有所帮助。谢谢大家引导我找到更好更简单的答案。

AngularJS: 服务未返回数据

AngularJS: Service not returning data

json

angularjs

angular-services