如何在angularjs GUI中獲取JSON值

如何在UI中使用angularjs在json下面迭代。如何在angularjs GUI中獲取JSON值

{"messages":[{"operationName":"Operation success","messageKey":"Forbearance Registration Data Overview fetched Successfully!","messageType":"info","fullText":"Forbearance Registration Data Overview fetched Successfully!"}],"status":"Fully Successful","forbearanceRegistration":[{"registrationId":0,"internationalClient":0,"registrationLevelIdentifier":"143333","isConfidential":0,"approvalDate":"2017-12-10","idenComplianceForFinDifficulty":0,"idenComplianceForModificationOrRefin":0,"idenComplianceForConcession":0,"isModificationLossRecog":0,"forbearanceMeasure":[{"measureId":30117,"measureCode":"B-Deferral or capitalisation of the interest payable","measureType":"Temporary","measureDescription":"fdafdsfdsfd","registrationId":0}]},{"registrationId":0,"internationalClient":0,"registrationLevelIdentifier":"143333","isConfidential":0,"approvalDate":"2125-01-19","idenComplianceForFinDifficulty":0,"idenComplianceForModificationOrRefin":0,"idenComplianceForConcession":0,"isModificationLossRecog":0,"forbearanceMeasure":[{"measureId":30116,"measureCode":"B-Deferral or capitalisation of the interest payable","measureType":"Temporary","measureDescription":"fdafdsfdsfd","registrationId":0}]}]}

如何在GUI angularjs中迭代上面的json值。

我需要迭代forbearanceRegistration字段和相應的內部forbearanceMeasure列表。

來源

2017-08-04 Jitendra Singh Pal

我敢肯定，這是在任何角度教程中的第一課。請發佈您的解決問題的嘗試。 –

可以表現在許多類型的JSON，特別是如果你需要NG-指令，我把這裏與您的JSON的例子是無序列表遍歷數組，但你可以用表格做等

控制器 在你的控制器做一個變量，其中把JSON像這樣

$scope.data = { 
    "messages": [ 
    { 
     "operationName": "Operation success", 
     "messageKey": "Forbearance Registration Data Overview fetched Successfully!", 
     "messageType": "info", 
     "fullText": "Forbearance Registration Data Overview fetched Successfully!" 
    } 
    ], 
    "status": "Fully Successful", 
    "forbearanceRegistration": [ 
    { 
     "registrationId": 0, 
     "internationalClient": 0, 
     "registrationLevelIdentifier": "143333", 
     "isConfidential": 0, 
     "approvalDate": "2017-12-10", 
     "idenComplianceForFinDifficulty": 0, 
     "idenComplianceForModificationOrRefin": 0, 
     "idenComplianceForConcession": 0, 
     "isModificationLossRecog": 0, 
     "forbearanceMeasure": [ 
     { 
      "measureId": 30117, 
      "measureCode": "B-Deferral or capitalisation of the interest payable", 
      "measureType": "Temporary", 
      "measureDescription": "fdafdsfdsfd", 
      "registrationId": 0 
     } 
     ] 
    }, 
    { 
     "registrationId": 0, 
     "internationalClient": 0, 
     "registrationLevelIdentifier": "143333", 
     "isConfidential": 0, 
     "approvalDate": "2125-01-19", 
     "idenComplianceForFinDifficulty": 0, 
     "idenComplianceForModificationOrRefin": 0, 
     "idenComplianceForConcession": 0, 
     "isModificationLossRecog": 0, 
     "forbearanceMeasure": [ 
     { 
      "measureId": 30116, 
      "measureCode": "B-Deferral or capitalisation of the interest payable", 
      "measureType": "Temporary", 
      "measureDescription": "fdafdsfdsfd", 
      "registrationId": 0 
     } 
     ] 
    } 
    ]

HTML

<head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 
    <b>Messages:</b> 
    <ul> 
     <li ng-repeat="message in data.messages"> 
     <strong>OperationName:</strong>{{message.operationName}}<br> 
     <strong>MessageKey:</strong>{{message.messageKey}}<br> 
     <strong>MessageType:</strong>{{message.messageType}}<br> 
     <strong>FullText:</strong>{{message.fullText}}<br> 

     </li> 

    </ul> 
    <b>ForbearanceRegistration</b> 
    <ul> 
     <li ng-repeat="item in data.forbearanceRegistration"> 
     <strong>RegistrationId:</strong>{{item.registrationId}}<br> 
     <strong>internationalClient:</strong>{{item.internationalClient}}<br> 
     <strong>registrationLevelIdentifier:</strong>{{item.registrationLevelIdentifier}}<br> 
     <strong>isConfidential:</strong>{{item.isConfidential}}<br> 
     <strong>approvalDate:</strong>{{item.approvalDate}}<br> 
     <strong>idenComplianceForFinDifficulty:</strong>{{item.idenComplianceForFinDifficulty}}<br> 
     <strong>idenComplianceForModificationOrRefin:</strong>{{item.idenComplianceForModificationOrRefin}}<br> 
     <strong>idenComplianceForConcession:</strong>{{item.idenComplianceForConcession}}<br> 
     <strong>isModificationLossRecog:</strong>{{item.isModificationLossRecog}}<br> 
     <ul> 
      <li ng-repeat="measure in item.forbearanceMeasure"> 
      <strong>MeasureID:</strong>{{measure.measureId}}<br> 
      <strong>measureCode:</strong>{{measure.measureCode}}<br> 
      <strong>measureType:</strong>{{measure.measureType}}<br> 
      <strong>measureDescription:</strong>{{measure.measureDescription}}<br> 
      <strong>registrationId:</strong>{{measure.registrationId}}<br> 
      </li> 
     </ul> 
     </li> 
    </ul> 
    </body> 

</html>

繼承人plnkr在行動中看到：example

來源

2017-08-04 16:25:55

嗨耶穌，你能否把我的數據提供給表格中的同學。 –

只需更改我放的代碼並用表替換ul，然後將li與tr和內容放入td ex。 '

操作名稱：{{message.operationName}}' –

簡單：

<table> 
    <tr ng-repeat="(key,value) in objecToIterate"> 
    <div ng-if="value[0]"> // for array fields 
     <div ng-repeat='item in value'> 
      <span>{{ item.field1ToDisplay}}<span> 
      <span>{{ item.field2ToDisplay}}<span> 
      <span>{{ item.field3ToDisplay}}<span> 
      .... 
     </div> 
    </div> 
    <div ng-if="!value[0]"> // for non array fields 
     {{value}} 
    </div> 
    </tr> 
</table>

來源

2017-08-04 15:54:54

感謝您的回覆。我執行併爲我工作。 –

相關問題

如何在angularjs GUI中獲取JSON值

回答

相關問題