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

Posted 2023-03-13

【中文标题】无法显示嵌套 JSON 文件/模型的数据

【英文标题】：Unable to show data of nested JSON file/model

【发布时间】：2018-07-05 07:49:17

【问题描述】：

我目前有一个本地 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'));
    

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

JS: ERROR 错误: Uncaught (in promise): TypeError: Converting circular structure to JSON JS：TypeError：将循环结构转换为 JSON

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

提前感谢您的帮助。

【参考方案1】：

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

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

【讨论】：

冒着听起来很愚蠢的风险——你会在哪里以及如何应用这个？我对 Nativescript 还很陌生，但仍在尝试掌握应用程序逻辑等。结合角度，这一切都需要哈哈:)。我确实尝试记录第一行代码，它返回 [object object]... 我不明白，因为你把它变成了一个字符串，不是吗？

[object Object] 是大多数对象的字符串表示形式。您很可能会在组件代码中执行此操作，例如 ngOnInit this.propertyData.subscribe(data => this.data = data);。您还可以在模板中使用async 管道从可观察对象中获取数据。您可能根本不需要使用JSON.stringify。

啊，我明白了，谢谢 - 我会调查一下。根本没有考虑过为此使用异步。至少现在我有一些东西可以尝试:)

【参考方案2】：

试试这个 -

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

【讨论】：

这个的输出是“未定义”。

这是因为您在构造函数中记录了这个，但当时您的 http 调用处于未决状态。

仅记录值，您可以尝试更新代码。但要在此方法之外使用此数据，您可以使用“闭包”。