Question

{"Kind": {
"Food": {
    "color": "0",
    "size": "31",
    "shape": "round"
},
"Drink": {
    "color": "0",
    "size": "34",
    "shape": "square"
},
"Condiments": {
    "color": "0",
    "size": "52",
    "shape": "rectangle"
}

嗨，我在JSON中有这个，我试图将它放在一张桌子中，只是显示了Kind，例如食物和形状指的是圆形。

你们知道如何提取它吗？

之前我更容易获取数据，因为JSON的格式

 var obj = [
{
    "Kind": "Food",
    "shape": "round"
}, {
    "Kind": "Drink",
    "shape": "square"
}, {
    "Kind": "Condiments",
    "shape": "rectangle"
}]

调用它很容易

<td>{{obj.Kind}}</td><td>{obj.shape}}</td>

现在我不确定如何使用新的json格式...

Answer 1

ng-repeat可以迭代对象。假设您的JSON存储在$ scope.data中：

<tr ng-repeat="(type, attributes) in data.Kind">
  <td>{{ type }}</td><td>{{ attributes.shape }}</td>
</tr>

Answer 2

根据我对您的问题的理解，以下是您的问题的答案。

你的HTML代码

<div ng-app="myApp" ng-controller="myController">
    <table>
        <tr>
            <th>Type</th> <th>Shape</th>
        </tr>
        <tr ng-repeat="(key ,value) in list.Kind">
            <td>{{key}}</td><td>{{value.shape}}</td>
       </tr>

    </table>

</div>

之后你的javascript就像这样

var myApp = angular.module("myApp", []);

    myApp.controller("myController", function($scope){

         $scope.list ={"Kind": {
    "Food": {
        "color": "0",
        "size": "31",
        "shape": "round"
    },
    "Drink": {
        "color": "0",
        "size": "34",
        "shape": "square"
    },
    "Condiments": {
        "color": "0",
        "size": "52",
        "shape": "rectangle"
    }
         }
                      };

    });

最后输出

输入形状

调味品矩形

喝酒广场

食物回合

Answer 3

你的HTML代码就像这样

<div ng-app="myApp" ng-controller="myController">
    <table>
        <tr ng-repeat="obj in list"><td>{{obj.Kind}}</td><td>{{obj.shape}}</td></tr>

    </table>

</div>

JS代码就像这样

var myApp = angular.module("myApp", []);

myApp.controller("myController", function($scope){
     $scope.list = [
        {
            "Kind": "Food",
            "shape": "round"
        }, {
            "Kind": "Drink",
            "shape": "square"
        }, {
            "Kind": "Condiments",
            "shape": "rectangle"
        }]
});

如果您需要工作代码，请获取here。

Answer 4

当您收到服务回复时:(假设回复）

response = { "Kind": {
                    "Food": {
                    "color": "0",
                    "size": "31",
                    "shape": "round"
             },
               "Drink": {
               "color": "0",
               "size": "34",
              "shape": "square"
             },
              "Condiments": {
              "color": "0",
              "size": "52",
              "shape": "rectangle"
             } 
          }
       }

$scope.Condiments = response.Kind.Condiments;
$scope.Drinks = response.Kind.Drink;

在前端，您可以访问该对象，如下所示

  {{Condiments.size}}
  {{ Drinks.size }}

或者您可以在ng-repeat

上使用对象迭代

Answer 5

您可以使用json对象创建一个数组，并像以前一样正常工作

Example Plunkr

代码段：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.list = {"Kind": {
      "Food": {
          "color": "0",
          "size": "31",
          "shape": "round"
      },
      "Drink": {
          "color": "0",
          "size": "34",
          "shape": "square"
      },
      "Condiments": {
          "color": "0",
          "size": "52",
          "shape": "rectangle"
      }
    }
  }

  var listKeys = Object.keys($scope.list);
  $scope.arrayOfKind = [];
  var kindObj;
  for (var kind in $scope.list[listKeys]) {
    kindObj = {};
    kindObj.kind = kind;
    kindObj.shape = $scope.list[listKeys][kind].shape;
    kindObj.size = $scope.list[listKeys][kind].size;
    $scope.arrayOfKind.push(kindObj);
  }
});

访问Json对象

5 个答案: