Angular 9 display data from nested json, fetched from rest api

Question

I would like to know how to display certain properties from nested json data fetched from REST API.

It only shows as [Object object][Object object]. However I want to access and display properties stored within Entry -> Resource.

I cannot really figure out what the problem is... amongst component and the interface.. and even if I write extensionally on my html such as {{observation.entry.resource}}, it is not working....

Thank you very much in advance!

my service code

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
import { Observation } from '../../models/observation';
import { DataSource } from '@angular/cdk/table';

@Injectable({
  providedIn: 'root'
})
export class CovidService {

  private covidApi:string = "http://hapi.fhir.org/baseR4/Observation?code=94531-1";
  
  constructor(private httpClient: HttpClient) { }

  getData():Observable<Observation[]>{  
    return this.httpClient.get<Observation[]>(this.covidApi);
    
  }
}

my component code

import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { CovidService } from '../../services/covid/covid.service';
import { Observation } from '../../models/observation';
import { Observable } from 'rxjs';
import {map} from 'rxjs/operators';

import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';




@Component({
  selector: 'app-covid-status',
  templateUrl: './covid-status.component.html',
  styleUrls: ['./covid-status.component.css']
})


export class CovidStatusComponent implements OnInit { 
   observations: Observation[];
   displayedColumns: string[] = ['id', 'entry','meta','status','subject'];
  
  constructor(private covidService: CovidService) {
  }

 
  ngOnInit(): void {
       this.getData();
  }  

  getData(){
    this.covidService.getData().subscribe(data=> {this.observations = data;});
    }
  

}

my html

<div class="container">
    <div class="row">
        <h1>testing if it shows with bundle</h1>
        <p>{{observations}}</p>
    </div>
</div>

data interface

export interface Observation {
    entry: Entry[];
  }
  
export interface Entry {
    fullUrl: string;
    resource: Resource;
    search: Search;
  }
  
export interface Search {
    mode: string;
  }
  
export interface Resource {
    resourceType: string;
    id: string;
    meta: Meta2;
    status: string;
    category: Category[];
    code: Code;
    subject: Subject;
    encounter: Subject;
    effectiveDateTime: string;
    issued: string;
    valueCodeableConcept: Code;
  }
  
export interface Subject {
    reference: string;
  }
  
export interface Code {
    coding: Coding[];
    text: string;
  }
  
export interface Category {
    coding: Coding[];
  }
  
export interface Coding {
    system: string;
    code: string;
    display: string;
  }
  
export interface Meta2 {
    versionId: string;
    lastUpdated: string;
    source: string;
    profile: string[];
    tag: Tag[];
  }
  
export interface Tag {
    system: string;
    code: string;
  }
  
export interface Link {
    relation: string;
    url: string;
  }
  
export interface Meta {
    lastUpdated: string;
  }

nested json

{
    "resourceType": "Bundle",
    "id": "e64c9372-aa3c-4e58-8d9a-af0ef210707a",
    "meta": {
        "lastUpdated": "2020-10-01T15:31:00.321+00:00"
    },
    "type": "searchset",
    "total": 157,
    "link": [
        {
            "relation": "self",
            "url": "http://hapi.fhir.org/baseR4/Observation?code=94531-1"
        },
        {
            "relation": "next",
            "url": "http://hapi.fhir.org/baseR4?_getpages=e64c9372-aa3c-4e58-8d9a-af0ef210707a&_getpagesoffset=20&_count=20&_pretty=true&_bundletype=searchset"
        }
    ],
    "entry": [
        {
            "fullUrl": "http://hapi.fhir.org/baseR4/Observation/c6100c54-94b6-4ed8-8400-6e990c679ed4",
            "resource": {
                "resourceType": "Observation",
                "id": "c6100c54-94b6-4ed8-8400-6e990c679ed4",
                "meta": {
                    "versionId": "1",
                    "lastUpdated": "2020-03-24T17:53:09.595+00:00",
                    "source": "#wP11dHjLGlZ6MwzU",
                    "profile": [
                        "http://hl7.org/fhir/us/core/StructureDefinition/us-core-observation-lab"
                    ],
                    "tag": [
                        {
                            "system": "https://smarthealthit.org/tags",
                            "code": "Covid19 synthetic population from Synthea"
                        }
                    ]
                },
                "status": "final",
                "category": [
                    {
                        "coding": [
                            {
                                "system": "http://terminology.hl7.org/CodeSystem/observation-category",
                                "code": "laboratory",
                                "display": "laboratory"
                            }
                        ]
                    }
                ],
                "code": {
                    "coding": [
                        {
                            "system": "http://loinc.org",
                            "code": "94531-1",
                            "display": "SARS-CoV-2 RNA Pnl Resp NAA+probe"
                        }
                    ],
                    "text": "SARS-CoV-2 RNA Pnl Resp NAA+probe"
                },
                "subject": {
                    "reference": "Patient/1b0580b9-1ee3-4353-b555-64c797d57564"
                },
                "encounter": {
                    "reference": "Encounter/135aee2a-f9d4-4627-ba9d-659ba067171d"
                },
                "effectiveDateTime": "2020-03-19T00:33:14-05:00",
                "issued": "2020-03-19T00:33:14.678-05:00",
                "valueCodeableConcept": {
                    "coding": [
                        {
                            "system": "http://snomed.info/sct",
                            "code": "10828004",
                            "display": "Positive (qualifier value)"
                        }
                    ],
                    "text": "Positive (qualifier value)"
                }
            },
            "search": {
                "mode": "match"
            }
        },
        {
            "fullUrl": "http://hapi.fhir.org/baseR4/Observation/41149276-9f25-4613-989a-0a58e3c95d92",
            "resource": {
                "resourceType": "Observation",
                "id": "41149276-9f25-4613-989a-0a58e3c95d92",
                "meta": {
                    "versionId": "1",
                    "lastUpdated": "2020-03-24T18:00:19.621+00:00",
                    "source": "#wjBsr5FxmhpDPleG",
                    "profile": [
                        "http://hl7.org/fhir/us/core/StructureDefinition/us-core-observation-lab"
                    ],
                    "tag": [
                        {
                            "system": "https://smarthealthit.org/tags",
                            "code": "Covid19 synthetic population from Synthea"
                        }
                    ]
                },
                "status": "final",
                "category": [
                    {
                        "coding": [
                            {
                                "system": "http://terminology.hl7.org/CodeSystem/observation-category",
                                "code": "laboratory",
                                "display": "laboratory"
                            }
                        ]
                    }
                ],
                "code": {
                    "coding": [
                        {
                            "system": "http://loinc.org",
                            "code": "94531-1",
                            "display": "SARS-CoV-2 RNA Pnl Resp NAA+probe"
                        }
                    ],
                    "text": "SARS-CoV-2 RNA Pnl Resp NAA+probe"
                },
                "subject": {
                    "reference": "Patient/0c4a1143-8d1c-42ed-b509-eac97d77c9b2"
                },
                "encounter": {
                    "reference": "Encounter/18f34edf-875f-4c77-ad6d-5062a516f4c1"
                },
                "effectiveDateTime": "2020-01-14T11:52:35-06:00",
                "issued": "2020-01-14T11:52:35.648-06:00",
                "valueCodeableConcept": {
                    "coding": [
                        {
                            "system": "http://snomed.info/sct",
                            "code": "10828004",
                            "display": "Positive (qualifier value)"
                        }
                    ],
                    "text": "Positive (qualifier value)"
                }
            },
            "search": {
                "mode": "match"
            }
        },
        {
            "fullUrl": "http://hapi.fhir.org/baseR4/Observation/ae8d76ec-249e-45ac-a9fd-0e632ea492c9",
            "resource": {
                "resourceType": "Observation",
                "id": "ae8d76ec-249e-45ac-a9fd-0e632ea492c9",
                "meta": {
                    "versionId": "1",
                    "lastUpdated": "2020-03-24T18:05:48.309+00:00",
                    "source": "#XWpckBrCJJ9e7CXB",
                    "profile": [
                        "http://hl7.org/fhir/us/core/StructureDefinition/us-core-observation-lab"
                    ],
                    "tag": [
                        {
                            "system": "https://smarthealthit.org/tags",
                            "code": "Covid19 synthetic population from Synthea"
                        }
                    ]
                },
                "status": "final",
                "category": [
                    {
                        "coding": [
                            {
                                "system": "http://terminology.hl7.org/CodeSystem/observation-category",
                                "code": "laboratory",
                                "display": "laboratory"
                            }
                        ]
                    }
                ],
                "code": {
                    "coding": [
                        {
                            "system": "http://loinc.org",
                            "code": "94531-1",
                            "display": "SARS-CoV-2 RNA Pnl Resp NAA+probe"
                        }
                    ],
                    "text": "SARS-CoV-2 RNA Pnl Resp NAA+probe"
                },
                "subject": {
                    "reference": "Patient/40c6abbe-96bb-4202-bed3-ddb9d8f68cb9"
                },
                "encounter": {
                    "reference": "Encounter/fa321fea-4d1d-485e-8c8b-4341255465b0"
                },
                "effectiveDateTime": "2020-01-11T21:00:42-06:00",
                "issued": "2020-01-11T21:00:42.718-06:00",
                "valueCodeableConcept": {
                    "coding": [
                        {
                            "system": "http://snomed.info/sct",
                            "code": "10828004",
                            "display": "Positive (qualifier value)"
                        }
                    ],
                    "text": "Positive (qualifier value)"
                }
            },
            "search": {
                "mode": "match"
            }
        },
        {
            "fullUrl": "http://hapi.fhir.org/baseR4/Observation/2d71d059-984b-4b13-b8b7-e9de2ee94f27",
            "resource": {
                "resourceType": "Observation",
                "id": "2d71d059-984b-4b13-b8b7-e9de2ee94f27",
                "meta": {
                    "versionId": "1",
                    "lastUpdated": "2020-03-24T18:08:38.202+00:00",
                    "source": "#zJ6AANWUU0Zx9Zjs",
                    "profile": [
                        "http://hl7.org/fhir/us/core/StructureDefinition/us-core-observation-lab"
                    ],
                    "tag": [
                        {
                            "system": "https://smarthealthit.org/tags",
                            "code": "Covid19 synthetic population from Synthea"
                        }
                    ]
                },
                "status": "final",
                "category": [
                    {
                        "coding": [
                            {
                                "system": "http://terminology.hl7.org/CodeSystem/observation-category",
                                "code": "laboratory",
                                "display": "laboratory"
                            }
                        ]
                    }
                ],
                "code": {
                    "coding": [
                        {
                            "system": "http://loinc.org",
                            "code": "94531-1",
                            "display": "SARS-CoV-2 RNA Pnl Resp NAA+probe"
                        }
                    ],
                    "text": "SARS-CoV-2 RNA Pnl Resp NAA+probe"
                },
                "subject": {
                    "reference": "Patient/e5c6bf5f-772f-4fee-8d72-4d05bca3027d"
                },
                "encounter": {
                    "reference": "Encounter/eb0a6461-9103-409e-8773-0d13b827d32f"
                },
                "effectiveDateTime": "2020-03-11T10:56:41-05:00",
                "issued": "2020-03-11T10:56:41.928-05:00",
                "valueCodeableConcept": {
                    "coding": [
                        {
                            "system": "http://snomed.info/sct",
                            "code": "10828004",
                            "display": "Positive (qualifier value)"
                        }
                    ],
                    "text": "Positive (qualifier value)"
                }
            },
            "search": {
                "mode": "match"
            }
        },

try {{observations | json}} it should help you view what's inside your object — Elmehdi
– Elmehdi, Commented Oct 1, 2020 at 18:50

wlf · Accepted Answer · 2020-10-01 17:08:46Z

2

The API returns an Observation which contains a list of Entry items, not a list of Observation items
Use map to transform from the Observation to the list of Entry items

export class CovidStatusComponent implements OnInit { 
   entries: Entry[];
   displayedColumns: string[] = ['id', 'entry','meta','status','subject'];
  
  constructor(private covidService: CovidService) {
  }

  ngOnInit(): void {
       this.getData();
  }  

  getData(){
    this.covidService.getData().subscribe(data=> {this.entries = data.map(d => d.entry);});
    }
}

Also:

{{observation.entry.resource}} won't work as entry is an array.
Use {{observation.entry[0].resource}} instead.

answered Oct 1, 2020 at 17:08

wlf

3,4231 gold badge24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Remy · Accepted Answer · 2020-10-01 17:28:06Z

With Angular Interpolation (the {{ observations}} syntax) you can only display strings.

Extended Solution

In order to make this work you have to supply a property of the object. For example like this:

<div class="container">
    <div class="row">
        <h1>testing if it shows with bundle</h1>
        <p>{{observations.id}}</p>
        <p>{{observations.meta}}</p>
    </div>
</div>

But these:

{{observations.entry}}
{{observations.entry.fullUrl}}

will both not work because "entry" is an array with many objects. So you could do something like this:

{{observations.entry[0].fullUrl}}

and it would definitely work. It takes the first object from the "entry" array. If you want to display all entries you have to iterate over it. Try this:

<div class="container">
    <div class="row">
        <h1>testing if it shows with bundle</h1>
        <p>{{observations.id}}</p>
        <p *ngFor="let e of observations.entry">{{ e.fullUrl }}</p>
    </div>
</div>

This will display the value of "fullUrl" for every object in the entry array. If you have multiple "observations" as your variable name lets assume you have to iterate over them too like this:

<div class="container">
    <div class="row">
        <h1>testing if it shows with bundle</h1>
        <div *ngFor="let observation of observations">
            <p>{{observations.id}}</p>
            <p *ngFor="let e of observation.entry">{{ e.fullUrl }}</p>
        </div>
    </div>
</div>

Quick solution

If you want a quick and dirty solution to just have a look at the result you can use the "json" pipe:

<div class="container">
    <div class="row">
        <h1>testing if it shows with bundle</h1>
        <p>{{ observations | json }}</p>
    </div>
</div>

user2763884 · Accepted Answer · 2020-10-01 18:02:03Z

your data is an array observations: Observation[]; so if you want to display all of data use *ngFor

<table>
  <tr>
    <th>FullUrl </th>
    <th>Search Mode</th>
    <th>resource Id</th>
  </tr>
  <tr *ngFor="let item of observation.entry">
    <td>{{ item.fullUrl }}</td>
    <td>{{ item.search.mode}}</td>
    <td>{{item.resource.id </td>
  </tr>
 </table>

and if sub is also array you can use sub loop *ngFor like item.resource.category

<table>
  <tr>
    <th>FullUrl </th>
    <th>Search Mode</th>
    <th>resource Id</th>
    <th> resource category</th>
  </tr>
  <tr *ngFor="let item of observation.entry">
    <td>{{ item.fullUrl }}</td>
    <td>{{ item.search.mode}}</td>
    <td>{{item.resource.id </td> 
<td>
<span *ngFor="let cat of item.resource.category">
{{cat.coding.display}}
      </span> </td>
  </tr>
</table>

make sure if data is array you can use *ngFor or index of array item.resource.category[0] then . field ...

Collectives™ on Stack Overflow

Angular 9 display data from nested json, fetched from rest api

3 Answers 3

Comments

Extended Solution

Quick solution

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Extended Solution

Quick solution

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related