How can I parse JSON attributes with slashes properly? - json

Question

I have 2 Interfaces:
DTO.ts
export interface Report{
berichtId: number,
summary: Label
}
export interface Label{
text: string
}
I use them to type my HttpClient get request, to receive an array of Reports:
Dao.service.ts
getReports():Observable<DTO.Report[]>{
return this.http.get<DTO.Report[]>(Dao.API+'report/current')
.pipe(
retry(3),
catchError(this.handleErrors)
);
What I get is this JSON:
[
{
"berichtId":1777,
"summary":
"{\"text\":\"asdf\"}"
}
]
Now I want to read them out but these slashes dont let me convert the JSON to my pre defined interface Report object. It just translates it to a normal string.
this.dao.getReports().subscribe(report=>{
console.log(report[0].summary); // {"text":"asdf"}
console.log(report[0].summary.text) // undefined
});
What is the best way to handle that problem? There are solutions online but they are often rather counter intuitive. There must be a better way in Angular.

Answer 1

I think you need to use map operator from rxjs/operators before returniing data from service.
I have intercepted the data using map (rxjs) and then parsed the summary.
Demo (check console on button click)
Service
import { Injectable } from '#angular/core';
import { of, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Report } from './types';
import { HttpClient } from '#angular/common/http';
#Injectable()
export class DataService {
constructor(private http: HttpClient) { }
getReports(): Observable<Report[]> {
return this.http.get<any[]>('api')
.pipe(
map(
values =>
values.map(val => {
val.summary = JSON.parse(val.summary)
return val;
}
)
));
}
// mock methos for demo
mockGetReports() {
return of<any[]>([
{
"berichtId":1777,
"summary":
"{\"text\":\"asdf\"}"
}
])
.pipe(
map(
values =>
values.map(val => {
val.summary = JSON.parse(val.summary)
return val;
}
)
));
}
}

Answer 2

I think you should try JSON.parse() or if it does not help then you can try this npm library
I hope this solves your issue.