Parsen eines JSON-Datums mit AngularJS

Question

Ich habe eine einfache Spring MVC-App, die POST-, GET- und DELETE-Anfragen akzeptiert. Am Frontend habe ich eine einfache JSP-Seite, die AngularJS-Bibliotheken importiert und versucht, den eingehenden JSON zu parsen. Ich habe den JSON mit Jackson serialisiert. Unten finden Sie die JSON-Antwort von meinem Spring MVC App kommen, und ich will es so mit ng-bind bekommen:

<td><span ng-bind="u.creationDate"></span></td> 

Dies ist, wie meine JSON Datum Zeit wie folgt aussieht:

{ 
    "dayOfMonth": 12, 
    "year": 2000, 
    "dayOfWeek": 2, 
    "era": 1, 
    "dayOfYear": 347, 
    "chronology": { 
    "zone": { 
     "fixed": true, 
     "id": "UTC" 
    } 
    }, 
    "yearOfEra": 2000, 
    "centuryOfEra": 20, 
    "yearOfCentury": 0, 
    "monthOfYear": 12, 
    "weekyear": 2000, 
    "weekOfWeekyear": 50, 
    "fields": [ 
    { 
     "lenient": false, 
     "minimumValue": -292275054, 
     "maximumValue": 292278993, 
     "rangeDurationField": null, 
     "leapDurationField": { 
     "unitMillis": 86400000, 
     "precise": true, 
     "name": "days", 
     "type": { 
      "name": "days" 
     }, 
     "supported": true 
     }, 
     "durationField": { 
     "unitMillis": 31556952000, 
     "precise": false, 
     "name": "years", 
     "type": { 
      "name": "years" 
     }, 
     "supported": true 
     }, 
     "name": "year", 
     "type": { 
     "durationType": { 
      "name": "years" 
     }, 
     "rangeDurationType": null, 
     "name": "year" 
     }, 
     "supported": true 
    }, 
    { 
     "lenient": false, 
     "minimumValue": 1, 
     "maximumValue": 12, 
     "rangeDurationField": { 
     "unitMillis": 31556952000, 
     "precise": false, 
     "name": "years", 
     "type": { 
      "name": "years" 
     }, 
     "supported": true 
     }, 
     "leapDurationField": { 
     "unitMillis": 86400000, 
     "precise": true, 
     "name": "days", 
     "type": { 
      "name": "days" 
     }, 
     "supported": true 
     }, 
     "durationField": { 
     "unitMillis": 2629746000, 
     "precise": false, 
     "name": "months", 
     "type": { 
      "name": "months" 
     }, 
     "supported": true 
     }, 
     "name": "monthOfYear", 
     "type": { 
     "durationType": { 
      "name": "months" 
     }, 
     "rangeDurationType": { 
      "name": "years" 
     }, 
     "name": "monthOfYear" 
     }, 
     "supported": true 
    }, 
    { 
     "minimumValue": 1, 
     "maximumValue": 31, 
     "rangeDurationField": { 
     "unitMillis": 2629746000, 
     "precise": false, 
     "name": "months", 
     "type": { 
      "name": "months" 
     }, 
     "supported": true 
     }, 
     "lenient": false, 
     "durationField": { 
     "unitMillis": 86400000, 
     "precise": true, 
     "name": "days", 
     "type": { 
      "name": "days" 
     }, 
     "supported": true 
     }, 
     "unitMillis": 86400000, 
     "name": "dayOfMonth", 
     "type": { 
     "durationType": { 
      "name": "days" 
     }, 
     "rangeDurationType": { 
      "name": "months" 
     }, 
     "name": "dayOfMonth" 
     }, 
     "supported": true, 
     "leapDurationField": null 
    } 
    ], 
    "fieldTypes": [ 
    { 
     "durationType": { 
     "name": "years" 
     }, 
     "rangeDurationType": null, 
     "name": "year" 
    }, 
    { 
     "durationType": { 
     "name": "months" 
     }, 
     "rangeDurationType": { 
     "name": "years" 
     }, 
     "name": "monthOfYear" 
    }, 
    { 
     "durationType": { 
     "name": "days" 
     }, 
     "rangeDurationType": { 
     "name": "months" 
     }, 
     "name": "dayOfMonth" 
    } 
    ], 
    "values": [ 
    2000, 
    12, 
    12 
    ] 
} 

Wie kann ich dieses Datum mit AngularJS richtig anzeigen?

Answer 1

Von Ihrer JSON-Antwort scheint es, dass Sie DateTime aus der Bibliothek Joda-Time verwenden, aber Sie Jackson Support für Joda fehlt. Sie sollten die folgenden Maven Abhängigkeit hinzufügen:

<dependency> 
    <groupId>com.fasterxml.jackson.datatype</groupId> 
    <artifactId>jackson-datatype-joda</artifactId> 
</dependency> 

Wenn Sie nicht Joda, aber Sie das Java 8 Mal API verwenden, können Sie die Unterstützung, indem Sie die folgende Abhängigkeit hinzu:

<dependency> 
    <groupId>com.fasterxml.jackson.datatype</groupId> 
    <artifactId>jackson-datatype-jsr310</artifactId> 
</dependency> 

---

Wenn Sie Spring Boot verwenden, wird dieses Modul automatisch von Jackson erkannt und geladen. Wenn Sie Ihre Anwendung ausführen jetzt, sollten Sie Ihre JSON ein einfacher Zeitstempel UNIX sein:

{"timestamp":1476709730090} 

Wenn Sie eine richtige Suche ISO Datetime-Zeichenfolge bevorzugen, können Sie die folgenden Eigenschaften im Frühjahr Boot verwenden:

spring.jackson.serialization.write-date-timestamps-as-nanoseconds=false 
spring.jackson.serialization.write-dates-as-timestamps=false 

Dies wird Ausgang so etwas wie:

{"timestamp":"2016-10-17T13:13:41.386Z"} 

---

Nun sollten Sie in der Lage sein, leicht diese mit AngularJS/JavaScript umwandeln, indem Sie:

obj.timestamp = new Date(obj.timestamp); 

Sie können diese wickeln in einem Service/stecken es in transformResponse und danach können Sie die AngularJS date filter verwenden, um richtig das Datumsformat, für Beispiel:

<td><span>{{obj.timestamp | date:'short'}}</span></td> 

Answer 2

Sie unter Code-Schnipsel versuchen:

var jsonString = '{"dayOfMonth":12,"year":2000,"dayOfWeek":2,"era":1,"dayOfYear":347,"chronology":{"zone":{"fixed":true,"id":"UTC"}},"yearOfEra":2000,"centuryOfEra":20,"yearOfCentury":0,"monthOfYear":12,"weekyear":2000,"weekOfWeekyear":50,"fields":[{"lenient":false,"minimumValue":-292275054,"maximumValue":292278993,"rangeDurationField":null,"leapDurationField":{"unitMillis":86400000,"precise":true,"name":"days","type":{"name":"days"},"supported":true},"durationField":{"unitMillis":31556952000,"precise":false,"name":"years","type":{"name":"years"},"supported":true},"name":"year","type":{"durationType":{"name":"years"},"rangeDurationType":null,"name":"year"},"supported":true},{"lenient":false,"minimumValue":1,"maximumValue":12,"rangeDurationField":{"unitMillis":31556952000,"precise":false,"name":"years","type":{"name":"years"},"supported":true},"leapDurationField":{"unitMillis":86400000,"precise":true,"name":"days","type":{"name":"days"},"supported":true},"durationField":{"unitMillis":2629746000,"precise":false,"name":"months","type":{"name":"months"},"supported":true},"name":"monthOfYear","type":{"durationType":{"name":"months"},"rangeDurationType":{"name":"years"},"name":"monthOfYear"},"supported":true},{"minimumValue":1,"maximumValue":31,"rangeDurationField":{"unitMillis":2629746000,"precise":false,"name":"months","type":{"name":"months"},"supported":true},"lenient":false,"durationField":{"unitMillis":86400000,"precise":true,"name":"days","type":{"name":"days"},"supported":true},"unitMillis":86400000,"name":"dayOfMonth","type":{"durationType":{"name":"days"},"rangeDurationType":{"name":"months"},"name":"dayOfMonth"},"supported":true,"leapDurationField":null}],"fieldTypes":[{"durationType":{"name":"years"},"rangeDurationType":null,"name":"year"},{"durationType":{"name":"months"},"rangeDurationType":{"name":"years"},"name":"monthOfYear"},{"durationType":{"name":"days"},"rangeDurationType":{"name":"months"},"name":"dayOfMonth"}],"values":[2000,12,12]}'; 

var ConvertedJson = JSON.parse(jsonString); 

dann können Sie convertedJson als Objekt verwenden.

Lassen Sie mich wissen, wenn irgendwelche Bedenken.