'Display JSON / Object multiple level in TypeScript Angular

I try to learn TypeScript and Angular and have tried to manipulate date from a JSON source (from https://api.trafikinfo.trafikverket.se/API)

I can iterate for several levels and it works but how can i show geometry data?

Geometry
{
  SWEREF99TM: "POINT (609497 6761441.11)",
  WGS84: "POINT (17.0229931 60.9727364)",
}

I tried to write something like

<span>{{b.Geometry.WGS84}}</span>

but it is not possible?

And next thing is it possible to use this data in a web browser to filter out information depending from where the search is done?

HTML

<div>
<button (click)="sendGetRequest()">Hämta trafikdata</button>
</div>
<div>
    <table>
        <thead>
        <tr>
            <td>End Time</td>
            <td>Location Descriptor</td>
            <td>Message</td>
        </tr>        
        </thead>
        <tbody>
        <tr *ngFor="let item of situations">
            
            <td>{{item.Deviation[0].EndTime}}</td>
            <td>{{item.Deviation[0].LocationDescriptor}}</td>
            <td>{{item.Deviation[0].Message}}</td>            
            
            
            
        </tr>
        </tbody>
    </table>

    <div *ngFor="let a of situations">

        <label>{{a.Id}}</label>
        <div>
        <label *ngFor="let b of a.Deviation">

            <span>{{b.EndTime}}</span>
            <span>{{b.LocationDescriptor}}</span>
            <span>{{b.Message}}</span>
         
            
           
        </label>>
        </div>


    </div>



</div>
<div>
<p>{{Message}}</p>
</div>

Code

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Deviation } from './trafik'
import { RESPONSE } from './trafik'
import { RESULT } from './trafik'
import { Situation } from './trafik'
import { Geometry } from './trafik'

 

@Component({
  selector: 'app-trafik',
  templateUrl: './trafik.component.html',
  styleUrls: ['./trafik.component.scss']
})
export class TrafikComponent implements OnInit {

  


  responses: RESPONSE[] = []

  results: RESULT[] = []
  
  situations: Situation[] = []

  deviations: Deviation[] = []

  constructor(public httpClient: HttpClient) {   }

  //En metod för att göra ett anropp
  sendGetRequest(){

    this.httpClient.get('https://removed/triggers/request/paths/invoke?api-version=2016-10-01&sp=%2Ftriggers%2Frequest%2Frun&sv=1.0&sig=Dfq-QFQ4gPF37NEjvzqpXog3mWaV2n4mIHwLgTsKtPA').subscribe((result)=>{
      //console.log(res);

      let mySituationString = JSON.stringify(result)
      let mySituatonObject = JSON.parse(mySituationString)
      this.responses = mySituatonObject
  
      
      this.situations = mySituatonObject.RESPONSE.RESULT[0].Situation

      
    

      this._Message = "Data hämtad!";
    }); 
  }


 

  //Visa en text i kompnenten.
  private _Message: string = "Ingen data hämtad!";

  public get Message(): string {
    return this._Message;
  }
  public set Message(value: string) {
    this._Message = value;
  }
  ngOnInit(): void {


  }

}

Interface:

export interface RootObject {
    RESPONSE: RESPONSE;
  }
  
  export interface RESPONSE {
    RESULT: RESULT[];
  }
  
  export interface RESULT {
    Situation: Situation[];
  }
  
  export interface Situation {
    CountryCode: string;
    Deleted: boolean;
    Deviation: Deviation[];
    Id: string;
    ModifiedTime: string;
    PublicationTime: string;
    VersionTime: string;
  }
  
  export interface Deviation {
    CountyNo?: number[];
    Creator: string;
    CreationTime: string;
    EndTime: string;
    Geometry?: Geometry;
    IconId: string;
    Id: string;
    ManagedCause?: boolean;
    Message?: string;
    MessageCode: string;
    MessageCodeValue: string;
    MessageType: string;
    MessageTypeValue: string;
    NumberOfLanesRestricted?: number;
    RoadNumber?: string;
    RoadNumberNumeric?: number;
    SeverityCode?: number;
    SeverityText: string;
    StartTime: string;
    LocationDescriptor?: string;
    TrafficRestrictionType?: string;
    VersionTime: string;
    TemporaryLimit?: string;
    PositionalDescription?: string;
  }
  
  export interface Geometry {
    SWEREF99TM: string;
    WGS84: string;
  }

Data:

[
  {
    CountryCode: "se",
    Deleted: false,
    Deviation: [
      {
        CountyNo: [
          21,
        ],
        Creator: "Trafikverket",
        CreationTime: "2022-03-21T19:17:23",
        EndTime: "2022-03-21T20:15:00",
        Geometry: {
          SWEREF99TM: "POINT (609497 6761441.11)",
          WGS84: "POINT (17.0229931 60.9727364)",
        },
        IconId: "trafficMessage",
        Id: "SE_STA_TRISSID_1_5775662",
        ManagedCause: true,
        Message: "Stillastående lastbil med punktering i södergående körfält mellan Högbacka och Axmartavlan. Däckassistans på plats.Begränsad framkomlighet.",
        MessageCode: "Fordonshaveri",
        MessageCodeValue: "brokenDownVehicle",
        MessageType: "Trafikmeddelande",
        MessageTypeValue: "VehicleObstruction",
        NumberOfLanesRestricted: 1,
        RoadNumber: "E4",
        RoadNumberNumeric: 4,
        SeverityCode: 4,
        SeverityText: "Stor påverkan",
        StartTime: "2022-03-21T19:16:05",
        LocationDescriptor: "E4 från Trafikplats Tönnebro (203) till Axmartavlan (202) i riktning mot Uppsala i Gävleborgs län (X)",
        TrafficRestrictionType: "Körfält blockerade",
        VersionTime: "2022-03-21T19:18:02",
      },
    ],
    Id: "GUID09022f05-a02b-4c1f-ade1-fa2615d265c0",
    ModifiedTime: "2022-03-21T18:18:38.766Z",
    PublicationTime: "2022-03-21T19:18:02",
    VersionTime: "2022-03-21T19:18:02",
  },
  {
    CountryCode: "se",
    Deleted: false,
    Deviation: [
      {
        CountyNo: [
          2,
          1,
        ],
        Creator: "Trafikverket",
        CreationTime: "2022-03-21T14:29:03",
        EndTime: "2022-03-21T20:00:00",
        Geometry: {
          SWEREF99TM: "POINT (651010 6563644.91)",
          WGS84: "POINT (17.6430759 59.1850052)",
        },
        IconId: "bridgeOpening",
        Id: "SE_STA_TRISSID_1_18531239",
        ManagedCause: true,
        Message: "Gäller även Saltsjöbron",
        MessageCode: "Broöppning",
        MessageCodeValue: "bridgeSwingInOperation",
        MessageType: "Trafikmeddelande",
        MessageTypeValue: "GeneralNetworkManagement",
        RoadNumber: "E4",
        RoadNumberNumeric: 4,
        SeverityCode: 4,
        SeverityText: "Stor påverkan",
        StartTime: "2022-03-21T19:40:00",
        LocationDescriptor: "E4 vid Motorvägsbron båda riktningarna i Stockholms län (AB)",
        VersionTime: "2022-03-21T19:17:36",
      },
      {
        CountyNo: [
          2,
          1,
        ],
        Creator: "Trafikverket",
        CreationTime: "2022-03-21T14:29:03",
        EndTime: "2022-03-21T20:00:00",
        Geometry: {
          SWEREF99TM: "POINT (651010 6563644.91)",
          WGS84: "POINT (17.6430759 59.1850052)",
        },
        IconId: "roadClosed",
        Id: "SE_STA_TRISSID_2_18531239",
        MessageCode: "Vägen avstängd",
        MessageCodeValue: "roadClosed",
        MessageType: "Trafikmeddelande",
        MessageTypeValue: "RoadOrCarriagewayOrLaneManagement",
        RoadNumber: "E4",
        RoadNumberNumeric: 4,
        SeverityCode: 4,
        SeverityText: "Stor påverkan",
        StartTime: "2022-03-21T19:40:00",
        VersionTime: "2022-03-21T19:17:36",
      },
    ],
    Id: "GUIDfbd74e84-07b6-460d-8c1a-126434aeb639",
    ModifiedTime: "2022-03-21T18:18:05.157Z",
    PublicationTime: "2022-03-21T19:17:36",
    VersionTime: "2022-03-21T19:17:36",
  },
  {
    CountryCode: "se",
    Deleted: false,
    Deviation: [
      {
        CountyNo: [
          20,
        ],
        Creator: "Trafikverket",
        CreationTime: "2022-03-21T19:14:20",
        EndTime: "2022-03-21T19:45:00",
        Geometry: {
          SWEREF99TM: "POINT (555441 6682103.19)",
          WGS84: "POINT (16.0022221 60.2718048)",
        },
        IconId: "trafficMessage",
        Id: "SE_STA_TRISSID_1_5775642",
        ManagedCause: true,
        Message: "Bärgning av en personbil, begränsad framkomlighet.",
        MessageCode: "Bärgning",
        MessageCodeValue: "vehicleRecovery",
        MessageType: "Trafikmeddelande",
        MessageTypeValue: "RoadsideAssistance",
        NumberOfLanesRestricted: 1,
        RoadNumber: "Väg 70",
        RoadNumberNumeric: 70,
        SeverityCode: 4,
        SeverityText: "Stor påverkan",
        StartTime: "2022-03-21T19:13:16",
        LocationDescriptor: "Väg 70 från Cirkulationsplats Hedemora till Trafikplats Brunna i riktning mot Sala i Dalarnas Län (W)",
        TrafficRestrictionType: "Körfält blockerade",
        VersionTime: "2022-03-21T19:14:21",
      },
    ],
    Id: "GUIDbdec4e6e-7df7-4231-9d10-f8d7dec931c4",
    ModifiedTime: "2022-03-21T18:14:56.625Z",
    PublicationTime: "2022-03-21T19:14:21",
    VersionTime: "2022-03-21T19:14:21",
  },
  {
    CountryCode: "se",
    Deleted: false,
    Deviation: [
      {
        CountyNo: [
          2,
          1,
        ],
        Creator: "Trafikverket",
        CreationTime: "2021-10-15T14:28:28",
        EndTime: "2022-12-31T16:00:00",
        Geometry: {
          SWEREF99TM: "POINT (696073.03 6664591.82)",
          WGS84: "POINT (18.52397 60.0714073)",
        },
        IconId: "roadwork",
        Id: "SE_STA_TRISSID_1_18058819",
        ManagedCause: true,
        Message: "Ledningsarbete. Trafiken dirigeras med trafikljus eller lots. \n\n",
        MessageCode: "Vägarbete",
        MessageCodeValue: "roadworks",
        MessageType: "Vägarbete",
        MessageTypeValue: "MaintenanceWorks",
        NumberOfLanesRestricted: 1,
        RoadNumber: "Väg 76",
        RoadNumberNumeric: 76,
        SeverityCode: 4,
        SeverityText: "Stor påverkan",
        StartTime: "2022-03-21T18:26:00",
        LocationDescriptor: "Väg 76 vid Länsgr. Stockholms/Uppsala län båda riktningarna i Stockholms län (AB)",
        TrafficRestrictionType: "Körfält blockerade",
        VersionTime: "2022-03-21T19:12:36",
      },
      {
        CountyNo: [
          2,
          1,
        ],
        Creator: "Trafikverket",
        CreationTime: "2021-10-15T14:28:28",
        EndTime: "2022-12-31T16:00:00",
        Geometry: {
          SWEREF99TM: "POINT (696073.03 6664591.82)",
          WGS84: "POINT (18.52397 60.0714073)",
        },
        IconId: "trafficMessage",
        Id: "SE_STA_TRISSID_2_18058819",
        Message: "Ledningsarbete. Trafiken dirigeras med trafikljus eller lots. \n\n",
        MessageCode: "Körfältsavstängningar",
        MessageCodeValue: "laneClosures",
        MessageType: "Trafikmeddelande",
        MessageTypeValue: "RoadOrCarriagewayOrLaneManagement",
        NumberOfLanesRestricted: 1,
        RoadNumber: "Väg 76",
        RoadNumberNumeric: 76,
        SeverityCode: 4,
        SeverityText: "Stor påverkan",
        StartTime: "2022-03-21T18:26:00",
        LocationDescriptor: "Väg 76 vid Länsgr. Stockholms/Uppsala län båda riktningarna i Stockholms län (AB)",
        TrafficRestrictionType: "Körfält blockerade",
        VersionTime: "2022-03-21T19:12:36",
      },
      {
        CountyNo: [
          2,
          1,
        ],
        Creator: "Trafikverket",
        CreationTime: "2022-03-21T19:12:36",
        EndTime: "2022-12-31T16:00:00",
        Geometry: {
          SWEREF99TM: "POINT (696073.03 6664591.82)",
          WGS84: "POINT (18.52397 60.0714073)",
        },
        IconId: "trafficMessage",
        Id: "SE_STA_SPEEDMANAGEMENTID_1_44294915",
        MessageCode: "Hastighetsbegränsning gäller",
        MessageCodeValue: "speedRestrictionInOperation",
        MessageType: "Trafikmeddelande",
        MessageTypeValue: "SpeedManagement",
        NumberOfLanesRestricted: 1,
        RoadNumber: "Väg 76",
        RoadNumberNumeric: 76,
        SeverityText: "Stor påverkan",
        StartTime: "2022-03-21T18:26:00",
        TemporaryLimit: "Hastighet: 30km/h",
        TrafficRestrictionType: "Körfält blockerade",
        VersionTime: "2022-03-21T19:12:36",
      },
    ],
    Id: "GUIDbb83c3ab-8a1e-4f0a-ae4b-8801eb921e31",
    ModifiedTime: "2022-03-21T18:14:24.367Z",
    PublicationTime: "2022-03-21T19:12:36",
    VersionTime: "2022-03-21T19:12:36",
  },
  {
    CountryCode: "se",
    Deleted: false,
    Deviation: [
      {
        CountyNo: [
          2,
          1,
        ],
        Creator: "Trafikverket",
        CreationTime: "2022-03-21T19:06:40",
        EndTime: "2022-03-21T19:40:00",
        Geometry: {
          SWEREF99TM: "POINT (675895.04 6576231.1)",
          WGS84: "POINT (18.0881462 59.2882919)",
        },
        IconId: "trafficMessage",
        Id: "SE_STA_TRISSID_1_18531739",
        ManagedCause: true,
        Message: "Personbil i vägren.",
        MessageCode: "Fordonshaveri",
        MessageCodeValue: "brokenDownVehicle",
        MessageType: "Trafikmeddelande",
        MessageTypeValue: "VehicleObstruction",
        PositionalDescription: "Vägren",
        SeverityCode: 2,
        SeverityText: "Liten påverkan",
        StartTime: "2022-03-21T19:06:06",
        LocationDescriptor: "Södra Länken vid Sofielundsrondellen i riktning mot E4/E20 i Stockholms län (AB)",
        TrafficRestrictionType: "Körfält blockerade",
        VersionTime: "2022-03-21T19:09:10",
      },
    ],
    Id: "GUIDe67d334d-0996-4d99-bd64-8759cda7eae8",
    ModifiedTime: "2022-03-21T18:09:44.359Z",
    PublicationTime: "2022-03-21T19:09:10",
    VersionTime: "2022-03-21T19:09:10",
  },
  {
    CountryCode: "se",
    Deleted: false,
    Deviation: [
      {
        CountyNo: [
          10,
        ],
        Creator: "Trafikverket",
        CreationTime: "2022-03-03T10:19:25",
        EndTime: "2022-03-25T16:00:00",
        Geometry: {
          SWEREF99TM: "POINT (511931.99 6230295.2)",
          WGS84: "POINT (15.1923981 56.2174225)",
        },
        IconId: "roadwork",
        Id: "SE_STA_TRISSID_1_9814932",
        ManagedCause: true,
        Message: "Vägen avstängd mellan trafikplatserna Ronneby V och Bräkne Hoby på grund av räckesarbete. ",
        MessageCode: "Vägarbete",
        MessageCodeValue: "roadworks",
        MessageType: "Vägarbete",
        MessageTypeValue: "MaintenanceWorks",
        RoadNumber: "E22",
        RoadNumberNumeric: 22,
        SeverityCode: 4,
        SeverityText: "Stor påverkan",
        StartTime: "2022-03-21T07:00:00",
        LocationDescriptor: "E22 från Trafikplats Bräkne Hoby (55) till Trafikplats Ronneby N (57) båda riktningarna i Blekinge län (K)",
        VersionTime: "2022-03-21T19:06:48",
      },
      {
        Creator: "Trafikverket",
        CreationTime: "2022-03-21T19:06:48",
        EndTime: "2022-03-25T16:00:00",
        IconId: "trafficMessage",
        Id: "SE_STA_TRISSID_1_27689709",
        MessageCode: "Följ omledningsskyltar",
        MessageCodeValue: "followDiversionSigns",
        MessageType: "Trafikmeddelande",
        MessageTypeValue: "ReroutingManagement",
        SeverityText: "Stor påverkan",
        StartTime: "2022-03-21T07:00:00",
        TemporaryLimit: "Omledning: Följ vitblå skyltning.",
        VersionTime: "2022-03-21T19:06:48",
      },
      {
        CountyNo: [
          10,
        ],
        Creator: "Trafikverket",
        CreationTime: "2022-03-03T10:19:25",
        EndTime: "2022-03-25T16:00:00",
        Geometry: {
          SWEREF99TM: "POINT (511931.99 6230295.2)",
          WGS84: "POINT (15.1923981 56.2174225)",
        },
        IconId: "roadClosed",
        Id: "SE_STA_TRISSID_2_9814932",
        MessageCode: "Vägen avstängd",
        MessageCodeValue: "roadClosed",
        MessageType: "Trafikmeddelande",
        MessageTypeValue: "RoadOrCarriagewayOrLaneManagement",
        RoadNumber: "E22",
        RoadNumberNumeric: 22,
        SeverityCode: 4,
        SeverityText: "Stor påverkan",
        StartTime: "2022-03-21T07:00:00",
        VersionTime: "2022-03-21T19:06:48",
      },
    ],
    Id: "GUID59cea43f-a058-4334-b43a-5c63eac5e2f1",
    ModifiedTime: "2022-03-21T18:08:06.578Z",
    PublicationTime: "2022-03-21T19:06:48",
    VersionTime: "2022-03-21T19:06:48",
  },
]
jsonangulartypescriptobject


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions