title: How to print elements of JSON object in AngularJS?
body: <p>I have a kind a big json object here is the part of it:</p>
  
  <pre><code>{
     "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"
                    }
                 ]
              }
           ]
        }
     }
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>nativeObject = YAML.parse(editor.getValue());
  var outstr = nativeObject.toString();
  var out = JSON.stringify(nativeObject);
  $('#jsoncode').val(out);
  $('#jsoncode').trigger('input');
  </code></pre>
  
  <p>I set this data into a angular variable using following code:</p>
  
  <pre><code>var app = angular.module('myApp', []);
  app.controller('jsonCtrl', function($scope) {
    $scope.myData = "";
  });
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>&lt;div id="documentation" class="col-md-6"&gt;
    &lt;div ng-controller="jsonCtrl" class="col-md-12"&gt;
      &lt;form name="myForm"&gt;
  
        &lt;input id="jsoncode" type="text" name="input" ng-model="myData" /&gt;
  
        &lt;table border="0"&gt;
          &lt;tr ng-repeat="data in myData.web_app.main"&gt;
            &lt;div class="page-header"&gt;
              &lt;td&gt;
  
                &lt;h1&gt; {{data.Description_title}}&lt;/h1&gt;
  
              &lt;/td&gt;
              &lt;td&gt;
                &lt;h1&gt; {{data.Description_title}}&lt;/h1&gt;
  
              &lt;/td&gt;
            &lt;/div&gt;
          &lt;/tr&gt;
          &lt;tr ng-repeat="data in myData.web_app.main"&gt;
            &lt;div class="page-header"&gt;
              &lt;td&gt;
                &lt;h3&gt;{{data.Description}}&lt;/h3&gt;
              &lt;/td&gt;
            &lt;/div&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
        &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading clickable"&gt;
            &lt;h3 class="panel-title"&gt;
          &lt;table border="0"&gt;
          &lt;tr ng-repeat="data in myData.web_app.head"&gt;
          &lt;td&gt;
          &lt;h4&gt; {{data.title}}&lt;/h4&gt;
          &lt;/td&gt;
          &lt;td&gt;{{data.class_server}}&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/table&gt;
          &lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!--
          &lt;tr ng-repeat="data in myData.web_app"&gt;
          &lt;td&gt;&lt;h4&gt; {{data.Description_title}}  &lt;/h4&gt;&lt;/td&gt;
          &lt;td&gt;{{data.Description}}&lt;/td&gt;
          &lt;/tr&gt;
  </code></pre>
  
  <p>Why this angular code is not working? How can I print those elements in my HTML document?</p>