Отображение вложенных JSON с angularjs

Question

Я пытаюсь отобразить вложенную JSON на странице. Я не уверен, как развернуть его.

В моем файле приложение JS У меня есть параметр, называемый initialData, что я хочу, чтобы вызвать функцию getProducts(), когда вид называется ...

'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 выглядит в случае, если вы хотите увидеть ...

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

Так quoteApi.getProducts() возвращает JSON, который выглядит, как это ...

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

Просто вынуть cat1 из ваших initialData объекта

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

Answer 2

Вы должны преобразовать свой ответ из вашего запроса HTTP дальше, так что вы только вернуть часть вам требуется, и вы можете также рассмотреть вопрос об использовании .then() подход:

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