I consume an Api.

I get well data but I'm completely lost to display informations.

I made a Stackblitz to explain the problem.

I just want to access to 'records' => 'fields' => 'name' values of each 'records'.

{
    "nhits": 38,
    "parameters": {
        "dataset": "communes-de-la-province-de-namur",
        "rows": 1,
        "start": 0,
        "format": "json",
        "timezone": "UTC"
    },
    "records": [
        {
            "datasetid": "communes-de-la-province-de-namur",
            "recordid": "5f50799324d15038c9708e48c6a32c907922d00a",
            "fields": {
                "nsi": "93088",
                "geo_shape": {
                    "coordinates": [
                        [
                            [
                                4.516330595797285,
                                50.315159737224334
                            ],
                            [
                                4.516580864937829,
                                50.31404658899336
                            ],
                            [
                                4.516687125130969,
                                50.313425631678086
                            ],
                            [
                                4.516773208694129,
                                50.312758726847896
                            ],
                            [
                                4.51683388309065,
                                50.31199699971867
                            ],
                            [
                                4.511136348481946,
                                50.28826153347796
                            ],
                            [
                                4.5113662847970755,
                                50.28794282863673
                            ]
                        ]
                    ],
                    "type": "Polygon"
                },
                "geo_point_2d": [
                    50.26709679846407,
                    4.433557385138468
                ],
                "name": "Walcourt"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    4.433557385138468,
                    50.26709679846407
                ]
            },
            "record_timestamp": "2019-02-13T15:00:55.334000 00:00"
        }
    ]
}

I'm very new to Angular, so any suggestions is helpfull.

Thank you!

CodePudding user response：

you in you HTML you have to change it like this:

<div *ngFor="let record of (communes$ | async).records">
  {{  record.fields?.name  }}
</div>

and there is a problem with your observable type, this is correct: public communes$: Observable<any>;

because the response is an object and not an array of objects