How To Print Dynamic Nested Json Arrays In A Tree Structure By Matching The Parent
how to print this dynamic Json array in a tree format the output i expect is like this firstname :- test Last name :-test1 Account=> role :-test3 status
Solution 1:
You can do it by including recursively in your template another template that render differently each value in your object depending on it's still an object or not. The function isArrayOrObject is used to check if a value is an object or not
//index.html:
<body ng-app="mainApp">
<divng-controller="controller"><ul><ling-repeat="(key, value) in inputs"ng-include="'node_renderer.html'"></li></ul></div>
</body>
//node_renderer.html: a template to be included that render each value in the object:<divng-switch="isArrayOrObject(value)"><divng-switch-when="false">{{key}}: {{value}}</div><divng-switch-when="true"><span>{{key}}=></span><ul><ling-repeat="(key, value) in value"ng-include="'node_renderer.html'"></li></ul></div></div>
app.controller('controller', function($scope) {
$scope.isArrayOrObject = function(value) {
return angular.isObject(value);
};
$scope.inputs = [
{
"firstname" : "Test"
},{
"lastname" : "Test1"
},{
"Account" : [
{"role" : "Test3"},
{"status" : "Test4"},
]
},
{
"Account1" : [
{"role" : "Test3"},
{"status" : "Test4"},
]
},
{
"Account2" : [
{"role" : {
'dim3': {
'dim4':{
'dim5':'cccc'
}
}
}
},
{"status" : "Test4"},
{"status" : "Test4"},
]
},
{
"ending" : "yes"
}
];
});
Solution 2:
you can assign the first key property and value of an each object to one object like this
$scope.inputs.forEach(function(data){
obj[Object.keys(data)[0]] = data[Object.keys(data)[0]]
});
angular.module("app",[])
.controller("ctrl",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"},
{"status" : "Test4"},
]
},
{
"ending" : "yes"
}
];
var obj= {};
$scope.inputs.forEach(function(data){
obj[Object.keys(data)[0]] = data[Object.keys(data)[0]]
});
//var arr = $scope.inputs.map(o=> o);console.log(obj)
})<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="app"ng-controller="ctrl"></div>
Post a Comment for "How To Print Dynamic Nested Json Arrays In A Tree Structure By Matching The Parent"