使用 AngularJS 解析 JSON 日期时间

Question

我有一个简单的 Spring MVC 应用程序，它接受 POST、GET 和 DELETE 请求。 在前端，我有一个简单的 JSP 页面，它正在导入 AngularJS 库并尝试解析传入的 JSON。我用杰克逊序列化了 JSON。 下面是来自我的 Spring MVC 应用程序的 JSON 响应，我想像这样使用ng-bind 得到它：

<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 正确显示此日期？

Answer 1

从您的 JSON 响应来看，您似乎正在使用来自 Joda-Time 库的 DateTime，但您缺少 Jackson 对 Joda 的支持。您应该添加以下 Maven 依赖项：

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

如果您没有使用 Joda，但您使用的是 Java 8 time API，则可以通过添加以下依赖项来添加支持：

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

---

如果您使用的是 Spring boot，Jackson 将自动识别并加载此模块。当您现在运行您的应用程序时，您的 JSON 应该是一个简单的 UNIX 时间戳：

{"timestamp":1476709730090}

如果您更喜欢看起来合适的 ISO 日期时间字符串，您可以在 Spring boot 中使用以下属性：

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>

Answer 2

你可以试试下面的代码sn-p：

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作为对象了。

如果有任何问题，请告诉我。