3

I have a kind a big json object here is the part of it:

{
   "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"
                  }
               ]
            }
         ]
      }
   }
}

I want to print each part of this object using its key in AngularJS. Here is the part of my angular code. First I set this data to a html hidden text box using this code segment:

nativeObject = YAML.parse(editor.getValue());
var outstr = nativeObject.toString();
var out = JSON.stringify(nativeObject);
$('#jsoncode').val(out);
$('#jsoncode').trigger('input');

I set this data into a angular variable using following code:

var app = angular.module('myApp', []);
app.controller('jsonCtrl', function($scope) {
  $scope.myData = "";
});

I have stringified this object and send, but in AngularJS I can print the whole JSON object but I can't access the elements by key. Following is a part of my angular code.

<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>

Why this angular code is not working? How can I print those elements in my HTML document?

2

1 Answer 1

1

If I understand you correctly, you want to display myData also in your input field? If that is the case, you could try:

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>

Sign up to request clarification or add additional context in comments.

8 Comments

Yes but the problem is I am taking this json object from online YAML code editor in my webpage. I converted the YAML to json. I want to use that json object provided by the code editor and populate the html page using it. I mean I can't hard code the json object to a mydata variable. that is the problem.
You need to use JSON.parse(jsonString); if you want to turn a JSON string into an object.
I have tried it too. But it will only print [object][object] unable to fetch the data from it.
Could you please provide a minimal example on JSFiddle that reproduces the problem?
The project I created is expressjs project. So it's routing it bit difficult to translate to the JSFiddle. But this is my project link of Github it contains whole project github.com/TharinduKetipe/CuubezOnlineAPIVisualizer
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.