Angular 将 json 字符串日期响应转换为 JS 日期的 8 种方法？

Question

我知道 json 不会以特殊方式处理日期，而是将它们作为来自服务器的字符串提供。有没有办法提供具有 ISO 日期属性的 json 对象响应并将其映射到已经将日期属性映射为 JS 日期的 class？

示例：

Json 响应：

{
    "data": {
        "id": 1,
        "name": "John",
        "surname": "Smith",
        "birthDate": "1986-05-04T22:59:59.000Z"
        "subscriptionDate": "2020-06-28T14:36:43.498Z"
    }
}

我有这个 class:

export class User {

    id: string;
    name: string;
    surname: string;
    birthDate: Date;
    subscriptionDate: Date;

}

我的服务方式：

getUser(id: string): Observable<User> {
    return this.http.get<User>(`${this.UrlService}estabelecimentos/${id}`, { headers: this.authenticationService.jwt() }).catch(super.serviceError);
}

但是当我在我的组件中使用它时 birthDate 和 subscriptionDate 总是被视为字符串。是否可以通过迭代 json 响应和修改对象将其转换为 JS 日期，而不必在每个请求中格式化日期？

Answer 1

简短的回答是否定的，因为 JSON 格式不允许日期类型。看到这个：https://www.w3schools.com/JS/js_json_datatypes.asp

除了将它们转换为 Date 对象之外，我认为您别无选择，此外，鉴于您的字符串日期格式，它相对微不足道：

ndate = new Date("1986-05-04T22:59:59.000Z")

Answer 2

JSON 不对日期提供任何特殊支持。您需要手动转换它。如下：

new Date("1986-05-04T22:59:59.000Z");

将 JSON 对象转换为 Javascript 对象可以帮助您实现所需的目标。

检查这个函数：

function convertJsonIntoJavaScript(data){
let newObj = new Object();
   Object.keys(data).forEach(x=> {
   let d = new Date(data[x]);
   newObj[x]= (d instanceof Date && !isNaN(d))? d: data[x];
});
return newObj;
}

注意：我还没有测试过这个功能，如果它有效，请在下面的评论中写下你的反馈。

Answer 3

由于 GET 将要 return 一个可观察对象，您应该可以这样做：

getUser(id: string): Observable<User> {
  return this.http.get<User>(`${this.UrlService}estabelecimentos/${id}`, { headers: this.authenticationService.jwt() })pipe(
    map(response => {
      return {
        "data": {
          "id": response.id,
          "name": response.name,
          "surname": response.surname,
          "birthDate": new Date(response.birthDate)
          "subscriptionDate": new Date(response.subscriptionDate)
      }
    }),
    catchError(()=> super.serviceError)
  )
}

Answer 4

我建议在返回之前转换 json 响应，如下所示：

getAll(): Observable<Session[]> {
  return this.apiService.get(`/sessions`).pipe(
    map((data)=>{
      return data.map((session) => {
        session.startDate = new Date(session.startDate);
        session.endDate = new Date(session.endDate);
        return session;
      }
    )})
  );
}

Angular 将 json 字符串日期响应转换为 JS 日期的 8 种方法？

Angular 8 way to convert json response with string dates to JS date?

angular-date-format

angular