Kamal Kamal - 5 months ago 17
AngularJS Question

target keys to get data from json

I'm a beginner in angular and am trying to fetch data from JSON. I've called json file in service and then call service in controller which is working fine. Now I want to show that data using ng-repeat in my HTML and failed to do that because I cant understand how to target particular keys and their value. Please check my code below...

In my JSON I have two main categories which are "Television" and "Washing machine". Each category has many products. I want to call ng-repeat first on main categories and then make another list for each main categories to show their products.. I have tried to call main categories in html which is fine, but now I want to know how to call their products.

HTML the way I called main categories ** may be not right

<div ng-controller="categoryNames">
<ul>
<li ng-repeat="(key, value) in categories[0]">
{{key}} <!--Call value of each category wise -->

</li>
</ul>
</div>


controller.js

myApp.service('categoryData', ['$http', function($http){
return {
category : function(){
return $http({'method' : 'GET', 'url' : 'js/product-data.json'}).then(function(response){
return response.data;
}, function(data){
console.log(data);
})
}
}

}])


myApp.controller('categoryNames', ['$scope', '$http', 'categoryData', function($scope, $http, categoryData){

categoryData.category().then(function(data){
$scope.categories = data.productCategory;
})

}])


json

{
"productCategory": [{
"Television": [{
"brandname": "VU",
"image": "images/1.jpeg",
"detail": "Vu 102cm (40) Full HD LED TV",
"price": "20,000",
"productId": "001"

}, {
"brandname": "LG",
"image": "images/2.jpeg",
"detail": "LG 108cm (43) Full HD LED ",
"price": "35,978",
"productId": "002"

}, {
"brandname": "VU",
"image": "images/3.jpeg",
"detail": "Vu 80cm (32) HD Ready LED",
"price": "13,989",
"productId": "003"

}, {
"brandname": "BPL",
"image": "images/4.jpeg",
"detail": "BPL Vivid 80cm (32) HD Ready LED ",
"price": "14,989",
"productId": "004"

}, {
"brandname": "VU",
"image": "images/5.jpeg",
"detail": "Vu 80cm (32) HD Ready Smart LED ",
"price": "17,989",
"productId": "005"

}],
"Washing Machines": [{
"brandname": "BPL",
"image": "images/wash1.jpeg",
"detail": "BPL Vivid 80cm (32) HD Ready LED ",
"price": "14,989",
"productId": "004"
}, {
"brandname": "Samsung",
"image": "images/wash2.jpeg",
"detail": "BPL Vivid 80cm (32) HD Ready LED ",
"price": "12,989",
"productId": "004"
}, {
"brandname": "Whirlpool",
"image": "images/wash3.jpeg",
"detail": "BPL Vivid 80cm (32) HD Ready LED ",
"price": "15,989",
"productId": "004"
}]
}]
}

Answer

EDITED : you are returning object that holds array you can iterate throw

ng-repeat="product in categories"

inside this iteraion

ng-repeat="tel in product.Television"