AngularJSでJSONの日付時刻を解析する

POST、GET、DELETEリクエストを受け付ける簡単なSpring MVCアプリがあります。フロントエンドでは、AngularJSライブラリを読み込んで、着信JSONを解析しようとする単純なJSPページがあります。私はJacksonとJSONをシリアライズしました。以下は私のSpring MVCのアプリからのJSON応答であると私はこのようなng-bindでそれを取得したい：AngularJSでJSONの日付時刻を解析する

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

これは私のJSONの日付時刻がどのように見えるかです：

どう

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

AngularJSを使用してこの日付を正しく表示できますか？

出典

2016-10-17 Türkmen Mustafa Demirci

私は日付取得するには、このspanタグを使用する<スパンNG-バインド= "u.creationDate">あなたが画面に表示したい情報は何 –

？日付と形式は？ –

「日付時刻」フィールドがJava/Springにどのようなタイプであるか教えていただけますか？それはJodaかJava 8のタイムライブラリからの 'DateTime'ですか？ – g00glen00b

あなたのJSONレスポンスからは、をJoda-Timeライブラリから使用しているようですが、あなたはJodaのジャクソンのサポートが不足しています。次の依存関係を追加することにより、サポートを追加することができ、あなたがジョダを使用していないが、あなたはJavaの8時間のAPIを使用している場合

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

：

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

次のMavenの依存関係を追加する必要があります

スプリングブートを使用している場合、このモジュールはジャクソンによって自動的に認識され、ロードされます。あなたが今、あなたのアプリケーションを実行すると、あなたのJSONは簡単なUNIXタイムスタンプのようになります。

{"timestamp":1476709730090}

あなたが適切探しのISO日時文字列を好む場合は、春のブーツで次のプロパティを使用することができます。

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

のようなこの意志の出力何か：

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

今、あなたは簡単に使用することによりAngularJS/JavaScriptでこれを変換することができるはずです：あなたはtransformResponseに入れて/サービスでこれをラップすることができ、その後、あなたがのために、適切にあなたの日付をフォーマットするAngularJS date filterを使用することができます

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

を例：

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

出典

2016-10-17 13:11:46 g00glen00b

ありがとうございます。これは私が探していたものです。 –

あなたは、コードスニペットの下に試すことができます。

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

、あなたがオブジェクトとしてconvertedJsonを使用することができます。

問題がある場合は教えてください。

出典

2016-10-17 12:18:35

AngularJSでJSONの日付時刻を解析する

答えて

関連する問題