CODEWITHSUNDEEP
javascriptangularjsjson
Kamal
Kamal

Reputation: 2180

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"
        }]
    }]
}

Upvotes: 0

Views: 373

Answers (3)

Thorsten
Thorsten

Reputation: 91

You seem to want to retrieve the names of the productCategories. As your ProductCategories-names are identifier for Json-Arrays itself you must retrieve the keys by using Object.keys(categories)

<li ng-repeat="key in Object.keys(categories)">
    {{key}} <!--Call value of each category wise -->
</li>

If you then want to return all products you can use a second ng-repeat on categories[key]

<li ng-repeat="product in categories[key]">
    {{product.name}}
</li>

Upvotes: 0

Yogesh
Yogesh

Reputation: 1585

Nested ng-repeat is needed, example below

<div ng-controller="categoryNames">
    <ul>
        <li ng-repeat="(key, value) in categories[0]">
            {{key}} - <span ng-repeat="(subkey, subval) in value">{{subkey}} : {{subval}}, </span>

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

you can even use another version ng-repeat for inner ng-repeat in above code, like this

    <div ng-controller="categoryNames">
        <ul>
            <li ng-repeat="(key, value) in categories[0]">
                {{key}} <br/>
                <div ng-repeat="obj in value">
                     <label>Brand Name:</label><label>{{obj.brandname}}</label>
                     <img src={{obj.image}}/>
                     <!-- similarly you can do for rest of it's properties-->
                </div>   
            </li>
        </ul>
    </div>

Upvotes: 0

abdoutelb
abdoutelb

Reputation: 1053

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"

Upvotes: 1

Related Questions