访问 Json 个对象
Accessing Json objects
{"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 格式..
ng-repeat 可以遍历对象。假设您的 JSON 存储在 $scope.data:
<tr ng-repeat="(type, attributes) in data.Kind">
<td>{{ type }}</td><td>{{ attributes.shape }}</td>
</tr>
你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。
当您从服务获得响应时:(假设响应)
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 上使用对象迭代
根据我对你问题的理解,以下是对你问题的回答。
你的 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"
}
}
};
});
最终输出为
类型 形状
调味品长方形
饮方
食物轮
您可以使用现有的 json 对象创建一个数组,并像以前一样正常工作
代码片段:
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);
}
});
{"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 格式..
ng-repeat 可以遍历对象。假设您的 JSON 存储在 $scope.data:
<tr ng-repeat="(type, attributes) in data.Kind">
<td>{{ type }}</td><td>{{ attributes.shape }}</td>
</tr>
你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。
当您从服务获得响应时:(假设响应)
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 上使用对象迭代
根据我对你问题的理解,以下是对你问题的回答。
你的 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"
}
}
};
});
最终输出为
类型 形状
调味品长方形
饮方
食物轮
您可以使用现有的 json 对象创建一个数组,并像以前一样正常工作
代码片段:
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);
}
});