Question

我目前有一个本地JSON文件，它保存了许多属性的数据。我的想法是将这个JSON文件加载到我的应用程序中，并将其显示在一个列表中，其中包含对其进行排序的选项（也就是重新排列数据）。

这是我的 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;
}

这是我的json文件的样子：

[
  {
    "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
  },
  {
    //...
  }
]

这是我的 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'));
    }
}

稍后，我希望能够在应用程序的其他地方使用我的服务，以（例如）向其添加属性对象。虽然我不知道这是否可能。但是现在我只是希望能够以某种方式让我的可观数组在属性组件中可用。目前，这似乎不起作用，因为当我在构造函数中使用console.log(JSON.stringify(this.propertyData));时，我收到以下错误：

JS：错误错误：未捕获（在承诺中）：TypeError：将循环结构转换为JSON JS：TypeError：将循环结构转换为JSON

现在，谷歌搜索告诉我，这是因为它是一个嵌套的JSON对象，但经过多次尝试后，我无法弄清楚如何解决这个问题。

提前感谢您的帮助。

Answer 1

属性Observable可能在其中有一些自我引用，导致您看到的错误。您不希望JSON.stringify propertyData是一个Observable，但您希望对发出的JSON响应进行字符串化。有很多不同的方法可以做到这一点，这取决于你使用它的地方。例如：

this.propertyData.subscribe(data => JSON.stringify(data));
const data = JSON.stringify(await this.propertyData.toPromise());

Answer 2

试试这个 -

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

无法显示嵌套JSON文件/模型的数据

2 个答案: