访问 Json 个对象

Question

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

你好，我把它放在 JSON 中，我想把它放在 table 中，它只会显示种类，例如食物和形状指的是圆形。

你们知道我如何提取它吗？

之前因为 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 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 3

当您从服务获得响应时：（假设响应）

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 4

根据我对你问题的理解，以下是对你问题的回答。

你的 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 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 个对象

Accessing Json objects

html

javascript

json

angularjs

jsonobject