Adding the input fields dynamically from nested json object in angulajs

debugcn Published at Dev

Deepak Pookkote

 var inputs={
    'firstname': '',
    'lastName':'',
   'account':{
     'role':'',
     'status':''
   }
 }

This is my model array. I want to display it dynamically in Webpage and by modifying the json array the changes should affect the form too.

Here is the image

Deepak Pookkote

<div ng-repeat="(key1, value1) in myPersonObj">
    <div ng-repeat="(key, value) in value1">
        <label>{{key}}</label>
        <input type="text" name="" value="{{value}}">
    </div>
</div>

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

app.controller("MainCtrl",function($scope){

  $scope.inputs = [
    {
      "firstname" : "Test"
    },{
      "lastname" : "Test1"
    },{                           
      "Account" : [

        {"role" : "Test3"},
        {"status" : "Test4"},
      ]
    },
    {
      "Account1" : [

        {"role" : "Test3"},
        {"status" : "Test4"},
      ]
    },
    {
      "Account2" : [

        {"role" : {
          'dim3': {
            'dim4':{
              'dim5':'cccc'
            }
          }
        }

      },
        {"status" : "Test4"},
      ]
    }
  ];
$scope.person = [];
$scope.myPersonObj = [];
/*console.log($scope.keys(inputs));*/
    $scope.checkIndex1 = function(arg, myPersonObj)
    {
        if (angular.isArray(arg) || angular.isObject(arg)) {
            angular.forEach(arg, function (value, key) {
                console.log(value);
                if(angular.isObject(value) || angular.isArray(value))
                {
                    $scope.checkIndex1(value, myPersonObj);
                }
                else
                {
                    console.log("pushing");
                    myPersonObj.push(arg);
                }
            });
        }
        else
        {
            console.log("pushing1");
            myPersonObj.push(arg);
        }      
    }

    $scope.checkIndex1($scope.inputs, $scope.myPersonObj);

    console.log("myPersonObj :"+ JSON.stringify($scope.myPersonObj));

    console.log($scope.inputs);

Collected from the Internet

Please contact [email protected] to delete if infringement.