Unable to show data of nested JSON file/model - json

Question

I've currently got a local JSON file which holds the data for numerous properties. The idea is to load this JSON file into my app, and display it into a list with options to sort it (aka rearrange the data).
Here's my property.model.ts
export class Property {
ID: number;
description: string;
price: string;
agreementType: string;
streetName: string;
houseNumber: number;
postCode: string;
place: string;
image: Image[];
status: string;
constructionYear: number;
areaSize: number;
numberOfRooms: number;
numberOfBedrooms: number;
garageType: string;
garageCapacity: number;
}
export class Image {
ID: number;
base64: string;
}
This is what my json file looks like:
[
{
"ID": 1,
"description": "Lorem ipsum...",
"price": "€800,25",
"agreementType": "unknown",
"streetName": "street",
"houseNumber": 55,
"postCode": "postCode",
"place": "place",
"image": [
{
"ID": 1,
"base64": ""
},
{
"ID": 2,
"base64": ""
},
{
"ID": 3,
"base64": ""
}
],
"status": "status",
"constructionYear": 1999,
"areaSize": 50,
"numberOfRooms": 5,
"numberOfBedrooms": 2,
"garageType": "",
"garageCapacity": 0
},
{
//...
}
]
and here is my property.service.ts
export class PropertyService {
public propertyData: Observable<Property>;
constructor(private http: HttpClient) {
this.propertyData = this.observableJson();
}
observableJson() : Observable<Property> {
return this.http.get('/data/property.json')
.map((res:Response) => { res.json(); console.log(res.json())})
.catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}
}
Later on, I want to be able to use my service elsewhere within the app as well, to (for instance) add a property object to it or something. Though I don't know if this is possible like that. But for now I just want to be able to somehow have my obserable array be useable in the property component. Which, at the moment, doesn't seem to work because when I use console.log(JSON.stringify(this.propertyData)); inside the constructor, I get the following error:
JS: ERROR Error: Uncaught (in promise): TypeError: Converting circular structure to JSON
JS: TypeError: Converting circular structure to JSON
now, a google search tells me that this is because it's a nested JSON object, but after many attempts I haven't been able to work out how to solve this.
Thanks in advance for any help.

Answer 1

The property Observable probably has something self-referential inside of it which results in the error you're seeing. You don't want to JSON.stringify propertyData which is an Observable, but you want to stringify the emitted JSON response. There are a lot of different ways to do this and it depends on the circumstances of where you are using it. For example:
this.propertyData.subscribe(data => JSON.stringify(data));
const data = JSON.stringify(await this.propertyData.toPromise());

Answer 2

Try this -
this.observableJson().subscribe(res => {
this.propertyData = res;
console.log(JSON.stringify(this.propertyData));
});