Displaying nested JSON with angularjs

Question

I am trying to display nested JSON in a page. I'm not sure how to drill down into it.

In my app js file I have an parameter called initialData that I want to call a function getProducts() when the view is called...

'use strict';
var quoteApp = angular.module('quoteApp', ['ui.router']);
quoteApp.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/home');
$stateProvider

    // HOME STATES AND NESTED VIEWS ========================================
    .state('home', {
        url: '/home',
        templateUrl: 'ng-views/choose.html',
        controller: "quoteBuilderController",
        resolve: {
            initialData: ['quoteApi', function (quoteApi) {
                return quoteApi.getProducts();
            }]
        }
    })
});

my quoteApi looks like this in case you want to see it...

(function () {
'use strict';

angular.module('quoteApp').factory('quoteApi', quoteApi);

quoteApi.$inject = ['$http'];

function quoteApi($http) {
    var service = {
        getProducts: getProducts,
        getPrices: getPrices
    };
    var baseUrl = 'http://www.website.com/api/Pricing';

    return service;

    function getProducts() {
        return httpGet('/GetProductCatalogue');
    }

    function getPrices() {
        return httpGet('/GetPrices');
    }

    /** Private Methods **/
    function httpExecute(requestUrl, method, data){
        return $http({
            url: baseUrl + requestUrl,
            method: method,
            data: data,
            headers: requestConfig.headers }).then(function(response){
            return response.data;
        });
    }
    function httpGet(url){
        return httpExecute(url, 'GET');
    }
}
})();

So quoteApi.getProducts() returns JSON that looks like this...

{
"Cat1": [
    {
        "product_id": 1,
        "product_name": "Prod1"            
    },
    {
        "product_id": 2,
        "product_name": "Prod2"
    }
],
"Cat2": [
    {
        ...
    }
]
}

My controller for the view looks like this...

(function () {
'use strict';
angular.module('quoteApp').controller('quoteController', ['$scope', '$http', '$timeout', quoteController]);
quoteController.$inject = ['initialData', 'quoteApi'];

function quoteController($scope, initialData) {
    $scope.cat1Products = initialData;
};
})();

So my question is, how can I get 'initialData' to load products from Cat1 only? Should I try to do this from the html? It seems like it should be straight forward enough but I can seem to get it. Thank you.

mindparse · Accepted Answer · 2015-02-03 22:51:52Z

1

You need to transform your response from your http request further so you only return the piece you require, and you may also want to consider using the .then() approach:

$http.get('/someUrl').then(function(response) {
        //Do something with response.data.Cat1 here
      }, function(errResponse) {
        console.error('Error while fetching data');
      });

answered Feb 3, 2015 at 22:51

mindparse

7,59529 gold badges105 silver badges217 bronze badges

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

1 Comment

Jose the hose Over a year ago

Thanks - where do I put this? Into the function httpExecute? There is a then() already there

yangli-io · Accepted Answer · 2015-02-03 22:50:48Z

0

Just take out cat1 from your initialData object

function quoteController($scope, initialData) {
    $scope.cat1Products = initialData['Cat1'];
};

answered Feb 3, 2015 at 22:50

yangli-io

17.4k8 gold badges43 silver badges50 bronze badges

1 Comment

Jose the hose Over a year ago

Thanks - but it didn't seem return any data at all (or errors)

Collectives™ on Stack Overflow

Displaying nested JSON with angularjs

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related