使用angularjs循環瀏覽json

Question

我有一個複雜的JSON對象，我必須通過它循環並呈現表單中的數據。對於我創建了一個小的服務是這樣的：

service.myApprovalResults = function(){ 
     var url = "../data/myapprovals.json"; 
     return $http.post(url).success(function(response) { 
     $rootScope.names = response; 
     }); 
    }; 

以下是我的JSON文件：

{ 
    "result": [ 
     { 
        "Approval": { 
         "Id":"111",  // Unique Id 
         "Api":"api/sometihgn/111" 
        }, 
        "Ticket":{ 
        "Id":"TKT1000011", 
        "API":"api/ticket/TKT1000011" 
        }, 
        "TicketItem":{ 
        "Id":"RITM1000011", 
        "API":"api/ticket_item/RITM1000011" 
        }, 
        "ProcessStep":"", 
        "Description":"Need Approval For sdsadas", // See Note Section 
        "VariablesSet":// See Note Section 
         [   // VariableSet details. 
          { 
           "Question":"Joining Date", 
           "Name": "joining_date", 
           "Id":"13", 
           "Value": ["12:12:2014"], 
           "DisplayValue":[""], 
           "Reference":"" 
          }, 
          { 
           "Question":"Reporting Manager", 
           "Name": "reporting_manager", 
           "Id":"14", 
           "Value": ["samd"], 
           "DisplayValue":["/Sam Doni"], 
           "Reference":"/api/user" 
          }, 
          { 
           "Question":"Department", 
           "Name": "department", 
           "Id":"15", 
           "Value": ["IT Security"], 
           "DisplayValue":[""], 
           "Reference":"" 
          }, 

          { 
           "Question":"Accessories Needed?", 
           "Name": "accessories", 
           "Id":"16", 
           "Value": ["laptop","mouse"], 
           "DisplayValue":[""], 
           "Reference":"" 
          } 
         ],        
        "ApprovalFor": { 
         "Name": "Sam Doni", 
         "UserName": "samd", 
         "Email":"samd@test.com", 
         "Api": "api/user/samd" // Api can be used to get more details 
        }, 
        "Approver":{ // Optional 
         "Name": "sdsdsdsad", 
         "UserName": "sdsdsad", 
         "Email":"sadsads@dssdf.com", 
         "Api": "api/user/dssds" // Api can be used to get more details 
        }, 
        "State": "Requested", 
        "Group": "",// Optional 
        "CreatedBy": { 
         "Name": "sadsdsddsa", 
         "UserName": "sdsd", 
         "Email": "sdsad@test.com", 
         "Api": "api/user/sadsadsa" 
        }, 
        "CreatedOn": "2016-11-09T17:29:01Z", 
        "UpdatedOn": "2016-11-09T17:29:01Z", 
        "CommentsSet": [{ 
          "Id": "10", 
          "TicketItem": "RITM1001011", 
          "Type": "approvalnote", 
          "Value": "User has issues related to access", 
          "CreatedOn": "2016-11-09T17:29:01Z", 
          "CreatedBy": { 
           "Name": "sdsdsadsadd", 
           "UserName": "dsdsad", 
           "Email":"sdsad@test.com", 
           "Api": "api/user/ssddsad" 
          } 
         }, 
         { 
          "Id": "11", 
          "TicketItem": "RITM1001011", 
          "Type": "approvalnote", 
          "Value": "Issue is solved", 
          "CreatedOn": "2016-11-08T17:29:01Z", 
          "CreatedBy": { 
           "Name": "dsadsdsad 
           "UserName": "sdsadas", 
           "Email":"dsads@test.com", 
           "Api": "api/user/sadsadsadsa" 
          } 
         } 
        ] 
       }, 
       { 
        "Approval": { 
         "Id":"112",  
         "Api":"api/approval/112" 
        }, 
        "Ticket":{ 
        "Id":"TKT1000013", 
        "API":"api/ticket/TKT1000013" 
        }, 
        "TicketItem":{ 
        "Id":"RITM1000021", 
        "API":"api/ticket_item/RITM1000021" 
        }, 
        "ProcessStep":"", 
        "Description":"Add user to Helpnow Group",// See Note Section 
        "VariablesSet":// See Note Section 
         [ 
          { 
           "Question":"Location Service Needed", 
           "Name": "location", 
           "Id":"16", 
           "Value": ["11"], 
           "Reference":"/api/location"; 
          }, 
          { 
           "Question":"What is the issue", 
           "Name": "service_needed", 
           "Id":"18", 
           "Value": ["aloha"] 
           "DisplayValue":[""], 
           "Reference":"" 
          } 
         ],      
        "ApprovalFor": { 
         "Name": "dsfdsfdsf", 
         "UserName": "dfdsf 
         "Email":"dfdsfds@gmail.com", 
         "Api": "api/user/rsds// Api can be used to get more details 
        }, 
        "Approver":"", 
        "State": "Requested", 
        "Group": { 
          "Name": "FIN Group", 
          "Id":"10" 
          "Api": "api/group/10"// Unique Group ID in SAP 
         } 

      } 
    ] 
} 

使用這個JSON我需要遍歷和形式顯示JSON數據。並且我在下面添加了以下代碼：

<ul> 
     <li ng-repeat="x in names"> 
      {{ x.result.Approval.Id }}, {{ x.result.Ticket.Id }}, {{x.result.TicketItem.Id}}, {{x.result.Description}} 
     </li> 
    </ul> 

完成上述操作但我無法看到表單中的數據。

我檢查了Chrome開發人員工具，JSON加載正常。 有人可以建議我嗎？

Answer 1

你錯誤地遍歷你的數據。我相信你想在你的數組中顯示細節。您需要將x in names更改爲x in names.result。然後，改變你的表現直接使用x這樣的：

{{ x.Approval.Id }}, {{ x.Ticket.Id }}, {{x.TicketItem.Id}}, {{x.Description}} 

Answer 2

第一件事，檢查是否已指定$rootScope.names作爲而declaratiion空數組。如果是這種情況，儘可能直接聲明並分配它，以避免數據結構的進一步複雜化。

根據您的JSON結構中的代碼應該是這樣的：

<ul> 
<li ng-repeat="x in names.result"> 
    {{ x.Approval.Id }}, {{ x.Ticket.Id }}, {{x.TicketItem.Id}}, {{x.Description}} 
</li> 
</ul> 

此外，爲了避免這種複雜性，試圖從下一次:)