I have a Json data like this
Object {Science: Array[3], Accounts: Array[3], History: Array[3], Mathematics: Array[3]}
Accounts: Array[3]
0: Object
1: Object
2: Object
length: 3
History: Array[3]
Mathematics: Array[3]
Science: Array[3]
Now to render this data in HTML page like this
<h1> Accounts</h1>
<div> Object </div>
<div> Object </div>
..................
You can use ng-repeat
directive with JSON Data like this example:
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']">
<p>Looping with ng-repeat:</p>
<ul>
<li data-ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
And You can even show your nested objects using ng-repeat
directive like this:
<ul ng:controller="Cntl">
<li ng:repeat="item in data">
{{item.name}} has children:
<ul>
<li ng:repeat="child in item.children">{{child.name}} has grant-children:
<ul><li ng:repeat="gch in child.children">{{gch.name}}</li></ul>
</li>
</ul>
</li>
</ul>
<script>
function Cntl() {
this.data = [{
name: '1',
children: [{
name: '11',
children: [{
name: '111'}, {
name: '112'}]}, {
name: '12',
children: [{
name: '121'}, {
name: '122'}]}]}, {
name: '2',
children: [{
name: '21'}, {
name: '22'}]
}];
}
</script>
Got my answer
<div class="panel" ng-repeat="(subject, activities) in Activities">
<h3 class="panel-title followMeBar">{{subject}}</h3>
<div class="panel-body">
<ul class="list-group">
<div class="row list-group-item" ng-repeat="activity in activities">
<div class="col-xs-4">
<img class="scale-notebook-image" src={{activity.fileTypeImg}}>
</div>
<div class="col-xs-8">
<div>{{activity.fileTitle}}</div>
<div>by {{activity.createdBy}}</div>
</div>
</div>
</ul>
</div>
</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.