我有一个很大的 json 对象，这里是它的一部分:
{
"web_app":{
"main":[
{
"Description_title":"Cuubez API Description",
"Description":"Use virtual networking services among devices that are managed by the OpenStack Compute service. The Networking (neutron) API v2.0 combines the API v1.1 functionality with some essential Internet Protocol Address Management (IPAM) functionality."
}
],
"head":[
{
"class_server":"employee resource",
"title":"cuubez example employee"
}
],
"methode_server":{
"get_group":[
{
"name":"employees",
"description":"get all the empldoyee from the repository",
"response":[
{
"code":"500",
"reason":"internal server error"
},
{
"code":"200",
"reason":"success response"
}
],
"body":[
{
"type":"object",
"id":"urn:jsonschema:com:cuubez:example:entity:Employee",
"properties":{
"address":{
"type":"string"
},
"department":{
"type":"string"
},
"name":{
"type":"string"
},
"empId":{
"type":"string"
},
"telNo":{
"type":"string"
}
}
}
]
}
],
"post_single":[
{
"name":"employees",
"description":"get all the employee from the repository",
"response":[
{
"code":"500",
"reason":"internal server error"
},
{
"code":"200",
"reason":"success response"
}
],
"body":[
{
"type":"object",
"id":"urn:jsonschema:com:cuubez:example:entity:Employee",
"properties":{
"address":{
"type":"string"
},
"department":{
"type":"string"
},
"name":{
"type":"string"
},
"empId":{
"type":"string"
},
"telNo":{
"type":"string"
}
}
}
]
}
],
"get_single":[
{
"name":"employees/{empId}",
"description":"get single employee from the repository",
"request":[
{
"parameter":"(QP)empId",
"type":"string",
"description":"employee identity"
},
{
"parameter":"(HP)org_Id",
"type":"string",
"description":"organization identity"
}
],
"response":[
{
"code":"500",
"reason":"internal server error"
},
{
"code":"200",
"reason":"succes response"
},
{
"code":"400",
"reason":"no employee found"
}
]
}
],
"delete_single":[
{
"name":"employees/{empId}",
"description":"delete single employee from the repository",
"request":[
{
"parameter":"(PP)empId",
"type":"string",
"description":"employee identity"
}
],
"response":[
{
"code":"500",
"reason":"internal server error"
},
{
"code":"200",
"reason":"succes response"
},
{
"code":"400",
"reason":"no employee found"
}
]
}
],
"put_single":[
{
"name":"employees/{empId}",
"description":"update single employee",
"request":[
{
"parameter":"(PP)empId",
"type":"string",
"description":"employee identity"
}
],
"body":[
{
"type":"object",
"id":"urn:jsonschema:com:cuubez:example:entity:Employee",
"properties":{
"address":{
"type":"string"
},
"department":{
"type":"string"
},
"name":{
"type":"string"
},
"empId":{
"type":"string"
},
"telNo":{
"type":"string"
}
}
}
],
"response":[
{
"code":"500",
"reason":"internal server error"
},
{
"code":"200",
"reason":"succes response"
},
{
"code":"400",
"reason":"no employee found"
}
]
}
]
}
},
"client_app":{
"methode_client":{
"head":[
{
"class_client":"User resource",
"title":"/users"
}
],
"post_single_user":[
{
"name":"users",
"description":"Add new user to repository",
"response":[
{
"code":"500",
"reason":"internal server error"
},
{
"code":"200",
"reason":"success response"
}
],
"body":[
{
"type":"object",
"id":"urn:jsonschema:com:cuubez:example:entity:Employee",
"properties":{
"address":{
"type":"string"
},
"department":{
"type":"string"
},
"name":{
"type":"string"
},
"empId":{
"type":"string"
},
"telNo":{
"type":"string"
}
}
}
]
}
],
"delete_single_user":[
{
"name":"users/{userId}",
"description":"delete single user from the repository ",
"request":[
{
"parameter":"(PP)userId",
"type":"string",
"description":"user identity"
}
],
"response":[
{
"code":"500",
"reason":"internal server error"
},
{
"code":"200",
"reason":"succes response"
},
{
"code":"400",
"reason":"no employee found"
}
]
}
],
"put_single_user":[
{
"name":"users/{userId}",
"description":"update single user",
"request":[
{
"parameter":"(PP)userId",
"type":"string",
"description":"user identity"
}
],
"body":[
{
"type":"object",
"id":"urn:jsonschema:com:cuubez:example:entity:User",
"properties":{
"address":{
"type":"string"
},
"department":{
"type":"string"
},
"name":{
"type":"string"
},
"userId":{
"type":"string"
},
"telNo":{
"type":"string"
}
}
}
],
"response":[
{
"code":"500",
"reason":"internal server error"
},
{
"code":"200",
"reason":"succes response"
},
{
"code":"400",
"reason":"no user found"
}
]
}
],
"get_users":[
{
"name":"users",
"description":"get all the users from the repository",
"response":[
{
"code":"500",
"reason":"internal server error"
},
{
"code":"200",
"reason":"success response"
}
],
"body":[
{
"type":"object",
"id":"urn:jsonschema:com:cuubez:example:entity:User",
"properties":{
"address":{
"type":"string"
},
"department":{
"type":"string"
},
"name":{
"type":"string"
},
"userId":{
"type":"string"
},
"telNo":{
"type":"string"
}
}
}
]
}
],
"get_single_user":[
{
"name":"users/{userId}",
"description":"get single user from the repository",
"request":[
{
"parameter":"(PP)userId",
"type":"string",
"description":"user identity"
}
],
"response":[
{
"code":"500",
"reason":"internal server error"
},
{
"code":"200",
"reason":"succes response"
},
{
"code":"400",
"reason":"no user found"
}
]
}
]
}
}
}
我想使用它在 AngularJS 中的键来打印这个对象的每个部分。这是我的 Angular 代码的一部分。首先，我使用以下代码段将此数据设置为 html 隐藏文本框:
nativeObject = YAML.parse(editor.getValue());
var outstr = nativeObject.toString();
var out = JSON.stringify(nativeObject);
$('#jsoncode').val(out);
$('#jsoncode').trigger('input');
我使用以下代码将此数据设置为 Angular 变量:
var app = angular.module('myApp', []);
app.controller('jsonCtrl', function($scope) {
$scope.myData = "";
});
我已将此对象字符串化并发送，但在 AngularJS 中我可以打印整个 JSON 对象但我无法按键访问元素。以下是我的 Angular 代码的一部分。
<div id="documentation" class="col-md-6">
<div ng-controller="jsonCtrl" class="col-md-12">
<form name="myForm">
<input id="jsoncode" type="text" name="input" ng-model="myData" />
<table border="0">
<tr ng-repeat="data in myData.web_app.main">
<div class="page-header">
<td>
<h1> {{data.Description_title}}</h1>
</td>
<td>
<h1> {{data.Description_title}}</h1>
</td>
</div>
</tr>
<tr ng-repeat="data in myData.web_app.main">
<div class="page-header">
<td>
<h3>{{data.Description}}</h3>
</td>
</div>
</tr>
</table>
<div class="panel panel-default">
<div class="panel-heading clickable">
<h3 class="panel-title">
<table border="0">
<tr ng-repeat="data in myData.web_app.head">
<td>
<h4> {{data.title}}</h4>
</td>
<td>{{data.class_server}}</td>
</tr>
</table>
</h3>
</div>
</div>
<!--
<tr ng-repeat="data in myData.web_app">
<td><h4> {{data.Description_title}} </h4></td>
<td>{{data.Description}}</td>
</tr>
为什么这个 Angular 代码不起作用？如何在我的 HTML 文档中打印这些元素？
最佳答案
如果我没理解错的话，你想在你的 input 字段中也显示 myData 吗？如果是这样，您可以尝试:
var myApp = angular.module('myApp', []);
angular.module('myApp').directive('jsonInput', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attr, ngModel) {
function into(input) {return JSON.parse(input);}
function out(data) {return JSON.stringify(data);}
ngModel.$parsers.push(into);
ngModel.$formatters.push(out);
}
};
});
function jsonCtrl($scope) {
$scope.myData = {
"web_app": {
"main": [{
"Description_title": "Cuubez API Description",
"Description": "Use virtual networking services among devices that are managed by the OpenStack Compute service. The Networking (neutron) API v2.0 combines the API v1.1 functionality with some essential Internet Protocol Address Management (IPAM) functionality."
}],
"head": [{
"class_server": "employee resource",
"title": "cuubez example employee"
}],
"methode_server": {
"get_group": [{
"name": "employees",
"description": "get all the empldoyee from the repository",
"response": [{
"code": "500",
"reason": "internal server error"
}, {
"code": "200",
"reason": "success response"
}],
"body": [{
"type": "object",
"id": "urn:jsonschema:com:cuubez:example:entity:Employee",
"properties": {
"address": {
"type": "string"
},
"department": {
"type": "string"
},
"name": {
"type": "string"
},
"empId": {
"type": "string"
},
"telNo": {
"type": "string"
}
}
}]
}],
"post_single": [{
"name": "employees",
"description": "get all the employee from the repository",
"response": [{
"code": "500",
"reason": "internal server error"
}, {
"code": "200",
"reason": "success response"
}],
"body": [{
"type": "object",
"id": "urn:jsonschema:com:cuubez:example:entity:Employee",
"properties": {
"address": {
"type": "string"
},
"department": {
"type": "string"
},
"name": {
"type": "string"
},
"empId": {
"type": "string"
},
"telNo": {
"type": "string"
}
}
}]
}],
"get_single": [{
"name": "employees/{empId}",
"description": "get single employee from the repository",
"request": [{
"parameter": "(QP)empId",
"type": "string",
"description": "employee identity"
}, {
"parameter": "(HP)org_Id",
"type": "string",
"description": "organization identity"
}],
"response": [{
"code": "500",
"reason": "internal server error"
}, {
"code": "200",
"reason": "succes response"
}, {
"code": "400",
"reason": "no employee found"
}]
}],
"delete_single": [{
"name": "employees/{empId}",
"description": "delete single employee from the repository",
"request": [{
"parameter": "(PP)empId",
"type": "string",
"description": "employee identity"
}],
"response": [{
"code": "500",
"reason": "internal server error"
}, {
"code": "200",
"reason": "succes response"
}, {
"code": "400",
"reason": "no employee found"
}]
}],
"put_single": [{
"name": "employees/{empId}",
"description": "update single employee",
"request": [{
"parameter": "(PP)empId",
"type": "string",
"description": "employee identity"
}],
"body": [{
"type": "object",
"id": "urn:jsonschema:com:cuubez:example:entity:Employee",
"properties": {
"address": {
"type": "string"
},
"department": {
"type": "string"
},
"name": {
"type": "string"
},
"empId": {
"type": "string"
},
"telNo": {
"type": "string"
}
}
}],
"response": [{
"code": "500",
"reason": "internal server error"
}, {
"code": "200",
"reason": "succes response"
}, {
"code": "400",
"reason": "no employee found"
}]
}]
}
},
"client_app": {
"methode_client": {
"head": [{
"class_client": "User resource",
"title": "/users"
}],
"post_single_user": [{
"name": "users",
"description": "Add new user to repository",
"response": [{
"code": "500",
"reason": "internal server error"
}, {
"code": "200",
"reason": "success response"
}],
"body": [{
"type": "object",
"id": "urn:jsonschema:com:cuubez:example:entity:Employee",
"properties": {
"address": {
"type": "string"
},
"department": {
"type": "string"
},
"name": {
"type": "string"
},
"empId": {
"type": "string"
},
"telNo": {
"type": "string"
}
}
}]
}],
"delete_single_user": [{
"name": "users/{userId}",
"description": "delete single user from the repository ",
"request": [{
"parameter": "(PP)userId",
"type": "string",
"description": "user identity"
}],
"response": [{
"code": "500",
"reason": "internal server error"
}, {
"code": "200",
"reason": "succes response"
}, {
"code": "400",
"reason": "no employee found"
}]
}],
"put_single_user": [{
"name": "users/{userId}",
"description": "update single user",
"request": [{
"parameter": "(PP)userId",
"type": "string",
"description": "user identity"
}],
"body": [{
"type": "object",
"id": "urn:jsonschema:com:cuubez:example:entity:User",
"properties": {
"address": {
"type": "string"
},
"department": {
"type": "string"
},
"name": {
"type": "string"
},
"userId": {
"type": "string"
},
"telNo": {
"type": "string"
}
}
}],
"response": [{
"code": "500",
"reason": "internal server error"
}, {
"code": "200",
"reason": "succes response"
}, {
"code": "400",
"reason": "no user found"
}]
}],
"get_users": [{
"name": "users",
"description": "get all the users from the repository",
"response": [{
"code": "500",
"reason": "internal server error"
}, {
"code": "200",
"reason": "success response"
}],
"body": [{
"type": "object",
"id": "urn:jsonschema:com:cuubez:example:entity:User",
"properties": {
"address": {
"type": "string"
},
"department": {
"type": "string"
},
"name": {
"type": "string"
},
"userId": {
"type": "string"
},
"telNo": {
"type": "string"
}
}
}]
}],
"get_single_user": [{
"name": "users/{userId}",
"description": "get single user from the repository",
"request": [{
"parameter": "(PP)userId",
"type": "string",
"description": "user identity"
}],
"response": [{
"code": "500",
"reason": "internal server error"
}, {
"code": "200",
"reason": "succes response"
}, {
"code": "400",
"reason": "no user found"
}]
}]
}
}
}
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<body ng-app="myApp">
<div id="documentation" class="col-md-6">
<div ng-controller="jsonCtrl" class="col-md-12">
<form name="myForm">
<input json-input id="jsoncode" type="text" name="input" ng-model="myData" />
<table border="0">
<tr ng-repeat="data in myData.web_app.main">
<div class="page-header">
<td>
<h1> {{data.Description_title}}</h1>
</td>
<td>
<h1> {{data.Description_title}}</h1>
</td>
</div>
</tr>
<tr ng-repeat="data in myData.web_app.main">
<div class="page-header">
<td>
<h3>{{data.Description}}</h3>
</td>
</div>
</tr>
</table>
<div class="panel panel-default">
<div class="panel-heading clickable">
<h3 class="panel-title">
<table border="0">
<tr ng-repeat="data in myData.web_app.head">
<td>
<h4> {{data.title}}</h4>
</td>
<td>{{data.class_server}}</td>
</tr>
</table>
</h3>
</div>
</div>
<!--
<tr ng-repeat="data in myData.web_app">
<td><h4> {{data.Description_title}} </h4></td>
<td>{{data.Description}}</td>
</tr> -->
</body>关于javascript - 如何在 AngularJS 中打印 JSON 对象的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32022619/