ngFor for complex nested JSON data in Angular-CodePudding

I have a complex nested Json and in order to access deep to display on the View (HTML), what would be the code with ngFor? I am using Async Pipe. I want to get display value of the Longitudes\Latitudes. The data is 4 level nested as the following :

            JSON
                      {
                         "results": [
                                    {
                                      location": {
                                                 "postcode": "63104",
                                                 "coordinates": {
                                                     **"latitude": "-69.8246",
                                                     "longitude": "134.8719"**
                                                   }
                                        ] }}]}
              HTML
                <ul *ngIf="customerObs | async as response">     
                   <li *ngFor="let result of response.results">
                     {{????}}
                     </li> 
                   </ul>
             TS
            customerObs = this.http.get<Response>('https://randomuser.me/api/?format=json');
            constructor(private http: HttpClient) { }

CodePudding user response：

The interface 'Location' was not imported in the main Interface, hence it was showing error.

CodePudding user response：

You can assign value nested.

<ul>
  <li *ngFor="let result of response.results">
    Longitude = {{ result.location.coordinates.longitude }}
    <br />
    Latitude = {{ result.location.coordinates.latitude }}
  </li>
</ul>