Issue displaying JSON through a service with Angular

Question

I have created a service which reads json and returns data. But for some reason it does not seem to work and is not giving me an error - which is making it really hard to debug. I was hoping someone here might find the issue.

First up, I have this controller in a file called 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]);

}());

The loadProducts() function is sitting in my service called service-js and looks like this...

'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 () {

            });
    }
};
});

The reason 'Connectivity' is added to data is because I only want to select that part of nested 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"}
]

}

Finally in my view I am trying to display the result in a ng-repeat but its not working

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

Can anyone see what I am doing wrong? Am I injecting ProductsFactory correctly? Thanks

mindparse · Accepted Answer · 2015-02-04 13:53:49Z

1

I think its just a case that you need to actually return the result of your $http call.

You are assigning the data to a result object, but not returning it in the loadProducts call.

So just do

return result;

After making the $http request

answered Feb 4, 2015 at 13:53

mindparse

7,59529 gold badges105 silver badges217 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jose the hose Over a year ago

Thanks for your reply. You can see there is already a return wrapping the loadProducts function. Is that the wrong place?

mindparse Over a year ago

Nope you still need the return there also, its just the way your loadProducts works right now, the server request is made but the result of that request is not being returned. So effectively its a fire and forget action, you actually need to return the result object within that function

Jose the hose Over a year ago

Maybe I'm not placing the 'return result' in the right location but its still not returning anything. I have added it after the $http.get and into the.then but it still returns 'result' as an empty object. Maybe I should refactor loadProducts ?

mindparse Over a year ago

Put the return result line after the whole http piece of code, just before the closing } of the loadProducts function definition

mindparse Over a year ago

Haha thanks, but Im actually going to be supporting England, I only have a welsh flag up as my wife is Welsh ;)

Collectives™ on Stack Overflow

Issue displaying JSON through a service with Angular

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related