我有一个很大的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文档中打印这些元素?
最佳答案
如果我对您的理解正确,是否也要在myData
字段中显示input
?如果是这样,您可以尝试:
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>