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

Question

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

示例：

Json回应：

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

我有这样的课：

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总是被视为字符串。有没有办法将其转换为JS日期，而不必通过迭代json响应和修改对象来格式化每个请求中的日期？

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响应之前对其进行转换，如下所示：

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

Answer 3

由于GET将返回一个可观察的结果，您应该能够执行以下操作：

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不提供任何对日期的特殊支持。您需要手动转换它。如下：

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

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