Разбор даты JSON с AngularJS

У меня есть простое приложение Spring MVC, которое принимает запросы POST, GET и DELETE. На переднем конце у меня есть простая страница JSP, которая импортирует библиотеки AngularJS и пытается разобрать входящий JSON. Я сериализовал JSON с Джексоном. Ниже приводится ответ JSON исходя из моего приложения Spring MVC, и я хочу, чтобы получить его с ng-bind как это:Разбор даты JSON с AngularJS

<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

Я использую этот поверочного тег, чтобы получить дату –

Какую информацию вы хотите показать в вашем экране? Только дата и в каком формате? –

Можете ли вы рассказать мне, какой тип поля «дата-время» находится в Java/Spring? Является ли это 'DateTime' из Joda или библиотеки времени Java 8? – g00glen00b

Из вашего ответа JSON, похоже, вы используете DateTime из библиотеки Joda-Time, но вам не хватает поддержки Джексона для Джоды. Вы должны добавить следующую Maven зависимость:

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

Если вы не используете Joda, но вы используете время API Java 8, вы можете добавить поддержку, добавив следующую зависимость:

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

Если вы используете Spring boot, этот модуль автоматически распознается и загружается Jackson. При запуске приложения теперь ваш JSON должен быть простой UNIX метка времени:

{"timestamp":1476709730090}

Если вы предпочитаете правильное глядя ISO DATETIME строку, вы можете использовать следующие свойства в Спринг загрузки:

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 с помощью:

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

Вы можете обернуть это в сервис/положить его в transformResponse и после этого вы можете использовать AngularJS date filter правильно отформатировать дату, для пример:

<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

Разбор даты JSON с AngularJS

ответ

Смежные вопросы