javascript - 目标键从 json 获取数据

Question

我是 Angular 的初学者，正在尝试从 JSON 获取数据。我在服务中调用了 json 文件，然后在 Controller 中调用了服务，该服务工作正常。现在我想在 HTML 中使用 ng-repeat 显示数据，但未能做到这一点，因为我无法理解如何定位特定键及其值。请检查我下面的代码...

在我的 JSON 中，我有两个主要类别，即“电视”和“洗衣机”。每个类别都有很多产品。我想首先在主要类别上调用 ng-repeat，然后为每个主要类别制作另一个列表以显示其产品。我尝试在 html 中调用主要类别，这很好，但现在我想知道如何调用他们的产品.

HTML我调用主要类别的方式**可能不正确

<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 1

编辑:您正在返回保存数组的对象您可以迭代

ng-repeat="product in categories"

在本次迭代中

ng-repeat="tel in product.Television"