angularjs와 함께 중첩 JSON 표시

Question

중첩 된 JSON을 페이지에 표시하려고합니다. 드릴 다운하는 방법을 모르겠습니다. 내 응용 프로그램의 js 파일에서

내가 함수 getProducts()을보기가 호출 될 때 호출 할 initialData라는 매개 변수를 가지고 ...

내 quoteApi이 경우 다음과 같습니다

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

당신이 원하는 ... 그래서 quoteApi.getProducts()는 다음과 같습니다 JSON을 반환 ...

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

를 볼

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

뷰에 대한 나의 컨트롤러는 ... 다음과 같습니다

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

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

그래서 내 질문, 어떻게 'initialData는'에만 CAT1에서 제품을로드 할 얻을 수 있습니까? html로이 작업을 수행해야합니까? 그것은 곧장 앞으로 충분히 있어야하지만 나는 그것을 얻을 수있는 것 같습니다. 고맙습니다.

Answer 1

은 그냥 initialData이

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

Answer 2

당신은 더 그래서 당신은 당신이 필요로하는 부분을 반환하고, 당신은 또한 그 때는 사용을 고려할 수 있습니다 귀하의 HTTP 요청에서 응답을 변환 할 필요가 오브젝트에서 CAT1을 꺼내() 접근 방식 :

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