What I am trying to achieve:
https://i.sstatic.net/hbdbC.jpg
I am facing issues with getting the desired dynamic form output. The values are not being displayed and the data is not passing from the JavaScript file to the html form. I have even tried using the console, but it doesn't seem to work. Could someone help point out where I might be making a mistake? Here is the codepen link and relevant code:
http://codepen.io/anon/pen/YVzRmZ
<!DOCTYPE html>
<html ng-app="inputs">
<head>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b2a252c3e272a396521380b7a657f657a">[email protected]</a>" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<div id="result" style="width:600px; text-transform: capitalize;" align="right">My_form</div>
<div ng-repeat="component in components">
<span ng-class="mylogic(component)">
</div>
var app = angular.module("inputs",[]);
app.controller("MainCtrl",function($scope){
$scope.components=[{
'name':{
'fname':'{"placeholder":"First Name","description":"Enter First Name of the user","value":"abc","type":"text"}',
'lname':'{"placeholder":"Second Name","description":"Enter Last Name of the user","value":"ddd","type":"text"}'
},
'password':'{"placeholder":"Password","description":"Enter password","value":"","type":"password"}',
'dim':{
'dim2':{
'dim3':'{"placeholder":"Sample","description":"Enter sample text","value":"ssds"}'
}
},
'ary':{
'ar10':{
'ary2':{
'ary3':'{"placeholder":"Sample","description":"Enter sample text","value":"acb"}'
}
},
'ary11':''
}
}];
var result='';
$scope.mylogic=function(obj,source){
if(typeof source[obj]=='string'){
var val=[];
if(source[obj]!=""){
val =JSON.parse(source[obj]);
return obj +' <input type="'+val.type+'" value="'+val.value+'" placeholder="'+val.placeholder+'" type="text" ><br><code>Notes* '+val.description+'</code> <hr>';
}else{
return obj +' <input placeholder="'+obj+'" type="text" > <hr>';
}
}else{ // console.log( components[obj] );
var subObj=source[obj]; var tempObj=[];
for(item in subObj ){
// console.log(item,'--',subObj);
tempObj.push(obj+' > ' +mylogic(item,subObj) );
}
return tempObj;
/* console.log(tempObj);*/
}
}
var res=document.getElementById('result');
res.innerHTML=result;
});