How to generate a HTML table dynamically from a nested JSON object using ngRepeat directive of AngularJS?
Question
I have to create a table as follows from a nested object.
JSON object :
{
"A":{
"1":"X",
"2":"Y",
"3":"Z"
},
"B":{
"1":"P",
"2":"Q",
"3":"R"
}
}
Desired Table :
A: X|Y|Z
B: P|Q|R
HTML code :
<!DOCTYPE html>
<html data-ng-app="myApp">
<body>
<div ng-controller="GreetingController" >
<div ng-repeat='(key,val) in arr'>{{temp(val)}}
<div ng-repeat='(nestedKey,nestedVal) in aux'>
{{nestedVal}}
</div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.arr={"A":{"1":"X","2":"Y","3",},"B":{"1":"P","2":"Q"}};
$scope.temp = function(val)
{
console.log(val);
$scope.aux = val;
}
}]);
</script>
I am unable to understand how and where to place the <table> , <tr> and <td> tags to be able to generate the table as describe.
2 answers
solution1
2 ACCPTED 2015-05-11 11:56:43
EDIT:
tr is row and td is table cell
<html data-ng-app="myApp">
<body>
<div ng-controller="GreetingController" >
<table>
<tr ng-repeat='(key,val) in arr'>
<td>
{{key}}
</td>
<td ng-repeat='(nestedKey,nestedVal) in val'>
{{nestedVal}}
</td>
</tr>
</table>
</div>
</body>
solution2
-1 2015-05-11 12:03:31
<div ng-controller="GreetingController" >
<table>
<tr>
<td><div ng-repeat='(key,val) in arr'>{{temp(val)}} </td>
</tr>
<tr><td> <div ng-repeat='(nestedKey,nestedVal) in aux'> </td>
{{nestedVal}}
</div>
</tr>
</div>
</table>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to dynamically load the nested array attributes in html table using angularjs?
Dynamically generate bootstrap grid HTML from JSON object using Javascript
how to generate HTML FORM dynamically using any JSON object?
The angularjs directive ngrepeat is not working with object in angular wizard
How to generate JSON from table using AngularJs for saving tabular data?
How to generate TextFields dynamically from json Object using angular2
AngularJS Directive: Pass dynamically created object as attribute for nested directive
Generate HTML table from JSON object
How to dynamically create a table from a JSON with nested lists using Javascript?
AngularJS curstom directive and ngRepeat
Related Tags