Wie bekomme ich JSON-Wert in der GUI angularjs

Wie iSerate unter json mit angularjs in UI zu iterieren.Wie bekomme ich JSON-Wert in der GUI angularjs

{"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}]}]}

Wie iterate über JSON-Wert in GUI angularjs.

Ich muss Forbearance iterateRegistration Felder und entsprechende Innen ForbearanceMeasure Liste.

Quelle

2017-08-04 Jitendra Singh Pal

Ich bin mir ziemlich sicher, dass dies die erste Lektion in jedem Winkel Tutorial ist. Bitte posten Sie Ihren Versuch, das Problem zu lösen. –

Sie die json in vielen Arten darstellen können, vor allem, wenn die sind ARRAYS Sie mit ng-Richtlinie durchlaufen müssen, das Beispiel ich hier setzen mit Ihrem json mit ungeordneter Liste ist, aber Sie kann es tun usw. mit Tisch

CONTROLLER In Ihrem Controller eine Variable machen, wo wie diese

$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 
     } 
     ] 
    } 
    ]

012 die json etwas setzen

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>

Heres ein plnkr in Aktion zu sehen: example

Quelle

2017-08-04 16:25:55

Hallo Jesus, kannst du mir bitte die Daten in den Tabellenformaten zur Verfügung stellen. –

Ändern Sie einfach den Code ich setzen und ersetzen Sie UL mit Tabelle, und li mit tr und den Inhalt in td ex. '

OperationName: {{message.operationName}}' –

einfach:

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

Quelle

2017-08-04 15:54:54

Danke für die Antwort. Ich habe es implementiert und es funktioniert für mich. –

Verwandte Themen