Question

我是角色的初学者，我正在尝试从JSON获取数据。我在服务中调用了json文件，然后在控制器中调用服务，该工作正常。现在我想在我的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"

Answer 2

需要嵌套的ng-repeat，例如

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

你甚至可以在上面的代码中使用另一个版本ng-repeat进行内部ng-repeat，比如这个

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

Answer 3

您似乎想要检索productCategories的名称。由于您的ProductCategories-names是Json-Arrays本身的标识符，因此您必须使用Object.keys（类别）检索密钥

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

如果您想要退回所有产品，可以在类别[键]

上使用第二次ng-repeat

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

目标键从json获取数据

3 个答案: