Question

我创建了一个读取json并返回数据的服务。但由于某种原因，它似乎不起作用，并没有给我一个错误 - 这使得它很难调试。我希望有人能找到这个问题。

首先，我将这个控制器放在一个名为build-controler.js

的文件中

'use strict';
(function () {

var app = angular.module('priceQuoteApp');

var quoteBuilderController = function ($scope, $http, $timeout, ProductsFactory) {

    var products = ProductsFactory.loadProducts();

    $scope.listOfProducts = products;

//other stuff going on 
};

app.controller('quoteBuilderController', ['$scope', '$http', '$timeout', 'ProductsFactory', quoteBuilderController]);

}());

loadProducts（）函数位于我的服务中，名为service-js，看起来像这样......

'use strict';
var priceQuoteApp = angular.module('priceQuoteApp');

var loadProductUrl = "scripts/json/sample-products.json";

priceQuoteApp.factory("ProductsFactory", function ($http) {

return {
    loadProducts: function () {
        //Create an object to hold your result
        var result = {};

        $http.get(loadProductUrl)
            .then(function (allProducts) {
                result = allProducts.data.Connectivity;
            })
            .finally(function () {

            });
    }
};
});

将“连接”添加到数据的原因是因为我只想选择嵌套json的那部分

{
"Connectivity": [
    {"product_id": 1, "product_name": "bla" },
    {"product_id": 2, "product_name": "bla2"}
],
"Other": [
    {"product_id": 1, "product_name": "bla" },
    {"product_id": 2, "product_name": "bla2"}
]

}

最后在我看来，我试图在ng-repeat中显示结果，但它不起作用

<table class="table table-hover margin bottom table-striped">
                <tr ng-repeat='product in listOfProducts'                        >
                 <td><h4>{{product.product_name}}</h4></td>
                </tr>
</table>

谁能看到我做错了什么？我正确注射ProductsFactory吗？感谢

Answer 1

我认为只需要实际返回$ http调用的结果。

您正在将数据分配给结果对象，但不会在loadProducts调用中将其返回。

所以就这样做

return result;

发出$ http请求后

通过Angular服务显示JSON的问题

1 个答案: