Deepak Vijay Deepak Vijay - 4 months ago 17
AngularJS Question

My AngularJs code not running working properly getting this error - TypeError: Cannot read property '#<Object>' of undefined

enter image description here _> the output i require is this .... when i'm trying to run the code it not working properly, when i use the for loop for printing the result in html its working fine when i tried to change my code concept to angularjs i cannot call the value it says obj,#Object not defined and getting multiple errors


I'm sharing my code


HTML:

<!DOCTYPE html>
<html ng-app="inputs">

<head>
<script data-require="angular.js@1.4.1" 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">Heloo</div>

<div ng-repeat="component in components">


{{mylogic(component)}}

</div>


JS:

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){
/* console.log(source);*/
/*console.log(obj,source);
console.log(typeof source[obj] );*/
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);*/
}
}

/*for(component in $scope.components){
result+= mylogic(component,$scope.components);
console.log('Component',$scope.components[component]);
console.log(result+= mylogic(component,$scope.components));
console.log(mylogic);
}
*/
// console.log('Component',$scope.components[component]);
var res=document.getElementById('result');
res.innerHTML=result;
});

Answer Source

var app = angular.module("inputs", []);
app.filter('unsafe', function($sce) {
    return $sce.trustAsHtml;
});
app.controller("MainCtrl", function($scope, $sce) {

    $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]);
                var res = obj + ' <input type="' + val.type + '" value="' + val.value + '" placeholder="' + val.placeholder + '" type="text" ><br><code>Notes* ' + val.description + '</code> <hr>';
                return res;
            } else {
                var res = obj + ' <input placeholder="' + obj + '" type="text" > <hr>';
                return res;
            }

        } else { // console.log( components[obj] );
            var subObj = source[obj];
            var res = '';
            for (item in subObj) {
                // console.log(item,'--',subObj);
                res += obj + ' > ' + $scope.mylogic(item, subObj);
            }
            return res;
        }
    }
})
<html ng-app="inputs">

<head>
    <script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
</head>

<body ng-controller="MainCtrl">

    <div id="result" style="width:600px; text-transform: capitalize;" align="right">Heloo</div>

    <div ng-repeat="component in components">
        <div ng-repeat="(key, value) in component" ng-bind-html="mylogic(key,component) | unsafe">

        </div>
    </div>

    </div>
    </body>

</html>

Check it