如何呈現在HTML頁面JSON數據採用了棱角分明JS

Question

我有這樣

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] 

現在JSON數據呈現在HTML頁面這個數據是這樣

<h1> Accounts</h1> 
<div> Object </div> 
<div> Object </div> 
.................. 

Answer 1

得到了我的答案

<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> 

Answer 2

您可以使用ng-repeat指令像這樣示例JSON數據：

<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> 

Fiddle Demo With Array

，你甚至可以顯示使用ng-repeat指令，這樣您的嵌套的對象：

<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> 

Fiddle Demo With Nested Objets