Navigating over objects in Angular.Js

Question

Navigating over objects in Angular.Js

I'm looking to iterate through the JSON below to create a dynamic form in JavaScript. The challenge is that the keys and values are not the same. How can I accomplish this?

["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 solutions are working for me:

//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);            
});

javascript arrays angularjs

Answer 1

Answer №1

One way to achieve this is by using plain Vanilla JavaScript:

for (let property in data[1]){
    console.log(property);
}

Check out this JSFiddle for a live example.

Answer 2

One way to achieve this is by using plain Vanilla JavaScript:

for (let property in data[1]){
    console.log(property);
}

Check out this JSFiddle for a live example.

Answer 3

Answer №2

Give this a shot

var myApp = angular.module("app",  []);

myApp.controller('myCtrl', function($scope, $sce){
$scope.user = {};
  $scope.registrationForm = {"username":{  
                         "field_type":"text",
                         "description":""
                      },
                      "password1":{ 
                            "field_type":"password"
                       },
                       "password2":{ 
                            "field_type":"password"
                       },
                      "email":{  
                         "field_type":"text",
                         "description":""
                      },
                      "first_name":{  
                         "field_type":"text",
                         "description":""
                      } };
  $scope.formData = { name : "" };
  $scope.html = "";
  angular.forEach($scope.registrationForm, 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="app" ng-controller="myCtrl">
  <form>
    <div ng-bind-html="trustedHtml">
    </div>
  </form>  
</div>

Answer 4

Give this a shot

var myApp = angular.module("app",  []);

myApp.controller('myCtrl', function($scope, $sce){
$scope.user = {};
  $scope.registrationForm = {"username":{  
                         "field_type":"text",
                         "description":""
                      },
                      "password1":{ 
                            "field_type":"password"
                       },
                       "password2":{ 
                            "field_type":"password"
                       },
                      "email":{  
                         "field_type":"text",
                         "description":""
                      },
                      "first_name":{  
                         "field_type":"text",
                         "description":""
                      } };
  $scope.formData = { name : "" };
  $scope.html = "";
  angular.forEach($scope.registrationForm, 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="app" ng-controller="myCtrl">
  <form>
    <div ng-bind-html="trustedHtml">
    </div>
  </form>  
</div>

Answer 5

Answer №3

Updated

Here is the solution that should meet your requirements. Feel free to customize the output as needed.

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>

Answer 6

Updated

Here is the solution that should meet your requirements. Feel free to customize the output as needed.

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>

Navigating over objects in Angular.Js

Answer №1

Answer №2

Answer №3

Similar questions

Error encountered while trying to call callback functions

Issue with integrating the jquery tokeniput plugin in asp.net mvc 3

What are some creative ways to provide video responses to a list of questions?

Dynamic content loading for Twitter Bootstrap Popover using Ajax

Experimenting with applying jquery .slideDown() to multiple classes in order to create dynamic animations

Encountering an issue with locating an argument in a JSON file

Adjust the height of the Iframe to match the content within it

Creating a function that writes to a file by utilizing the data input from

JSON - The challenge of incorporating single quotes within double quotes

This JavaScript operates in solitude, unable to collaborate with other JavaScripts

Utilizing JavaScript files within Angular2 components: A guide

Press the button to dynamically update the CSS using PHP and AJAX

Ways to expand the border horizontally using CSS animation from the middle

Utilize a class method within the .map function in ReactJS

Retrieve any webpage using AJAX

Hapi/Node.js Reference Error for Request: Troubleshooting the Issue

How can I identify the blur or focusout event in a tinyMCE textarea?

Running a Mongoimport command within a JavaScript/Node.js script

What should you do when you need to send a message from a website to an MQTT broker that lacks Websockets support?

Unable to execute JavaScript function by clicking