Iterating through object in AngularJs

Question

I want to iterate through following json and create a dynamic form,. But, both its key and value are not same. So how do I iterate it in JS?

["register_form",
   {  
      "name":{  
         "fielde":"textfield",
         "description":""
      },
      "pass":{  
         "pass1":{  
            "field":"password"
         },
         "pass2":{  
            "field_type":"password"
         }
      },
      "mail":{  
         "field":"textfield",
         "description":""
      },
      "field_first_name":{  
         "field_type":"textfield",
         "description":""
      }
      
   }
]

none of these working:

//Get the size of object = no. of fileds to be created
var size = Object.keys(response[1]).length; 
console.log("Size..." + size);

console.log("Keys.." + Object.keys(response[1]));
var keys = [];
var model = [];
var label = [];
keys.push(Object.keys(response[1]));

for(var i=0;i<keys.length;i++) {
   angular.forEach(response[1].keys[i], function(key, value){
   console.log(key + "..." + value);            
});
          

Answer 1

You can do it with Vanilla javascript like this:

for (key in response[1]){
console.log(key)
};

JSFiddle

Answer 2

Try This

var jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope, $sce){
$scope.user = {};
  $scope.register_form = {"name":{  
                         "field_type":"text",
                         "description":""
                      },
                      "pass1":{ 
                            "field_type":"password"
                       },
                       "pass2":{ 
                            "field_type":"password"
                       },
                      "mail":{  
                         "field_type":"text",
                         "description":""
                      },
                      "field_first_name":{  
                         "field_type":"text",
                         "description":""
                      } };
  $scope.formData = { name : "" };
  $scope.html = "";
  angular.forEach($scope.register_form, function(value, key){
    $scope.html = $scope.html + "<input type="+ value.field_type +" placeholder="+key+" >";
   });
  $scope.trustedHtml = $sce.trustAsHtml($scope.html);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
  <form>
    <div ng-bind-html="trustedHtml">
    </div>
  </form>  
</div>

Answer 3

Updated

I think this is what you need. You can format the output whatever way you want.

var data = {  
      "name":{  
         "fielde":"textfield",
         "description":""
      },
      "pass":{  
         "pass1":{  
            "field":"password"
         },
         "pass2":{  
            "field_type":"password"
         }
      },
      "mail":{  
         "field":"textfield",
         "description":""
      },
      "field_first_name":{  
         "field_type":"textfield",
         "description":""
      }
   };
function toArray(obj) {
    var result = [];var passName;var tempArray = [];
    for (var prop in obj) {
        var value = obj[prop];
        if (typeof value === 'object') {
                $('#myForm').append("<br/><b>[[" + prop +"]]</b><br/>");

            if ($.isNumeric(prop)) {
                passName = name + "[" + prop + "]";
            } else {
                passName = name + "['" + prop + "']";
            }
            tempArray = toArray(value, passName);
            $.each(tempArray, function (key, value) {
                result.push(value);
            });
        } else {
        $('#myForm').append("<label>" + prop +"</label> : <span>" + obj[prop] + "</span><br/>");
            result.push(name + "['" + prop + "']");
        }
    }
    return result;
}

toArray(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myForm">

</div>