Search code examples
angulartypescriptangular-httpclient

How can I display data from object in angular app?

I have an issue with displaying data from API response. The data that I receive are objects in the object. I tried to display data by JSON.striginfy but the data isn't clear.

This data I receive from API:

enter image description here

JSON:

{"102":{"173":"AX","175":"ZX","179":"Xantia","183":"XM","186":"Evasion","189":"C3","191":"Saxo","193":"Jumpy","194":"Berlingo","196":"Xsara","200":"C15","204":"Jumper","206":"C8","208":"C5","216":"C2","218":"C4","222":"C1","224":"C6","233":"C-Crosser","241":"Nemo","5007":"DS3","10194":"DS4","15270":"DS5","15382":"C-Zero","15411":"C-Elysée","16100":"SpaceTourer","16536":"MODEL","16693":"Berlingo Electric"},"103":{"244":"Tico","245":"Nexia","246":"Espero","247":"Racer","248":"Evanda","249":"Kalos","250":"Nubira","252":"Leganza","254":"Lanos","255":"Lublin 3","256":"Matiz","257":"Korando","259":"Musso","262":"Chairman","263":"Tacuma","264":"Matiz II","265":"Lanos II","1997":"FSO","2001":"Lublin II","16537":"MODEL"},"104":{"266":"Cinquecento","267":"Punto","269":"Bravo","271":"Brava","273":"Coupé","274":"Barchetta","275":"Ulysse","277":"Palio","278":"Multipla","281":"Croma","283":"Tempra","289":"Ducato","290":"Tipo","292":"Uno","294":"Panda","295":"Marea","300":"126 P","301":"Dobló","304":"Stilo","308":"Seicento","310":"Idea","312":"Scudo","320":"Grande Punto","326":"Linea","329":"500","331":"Fiorino","333":"Sedici","1987":"Strada","4936":"Punto Evo","4938":"Punto Actual","5011":"500C","5015":"Qubo","5102":"500 C","15202":"Freemont","15274":"Panda Classic","15416":"500L","15509":"500 L","15830":"500X","16124":"124 Spider","16125":"Talento","16195":"Fullback","16538":"MODEL"},"105":{"336":"Fiesta","337":"Focus","339":"Escort","340":"Mondeo","346":"Scorpio","352":"Transit","359":"Sierra","361":"Orion","369":"Ka","370":"Explorer","372":"Fusion","374":"StreetKa","375":"Galaxy","377":"Tourneo","385":"Maverick","392":"Puma","402":"S-MAX","406":"C-MAX","415":"Kuga","2016":"Ranger","15418":"B-MAX","15878":"Mustang","16170":"Edge","16390":"EcoSport","16539":"MODEL","16655":"Grand Tourneo"},"106":{"421":"Civic","422":"Jazz","423":"HR-V","424":"Prelude","425":"Legend","426":"Shuttle","427":"Stream","430":"S2000","432":"CR-V","434":"Accord","439":"Integra","450":"FR-V","456":"City","466":"Insight","5018":"CR-Z","16540":"MODEL","17088":"e"},"107":{"467":"Accent","468":"Lantra","469":"Sonata","471":"H100","472":"Getz","474":"S Coupe","475":"Pony","477":"Coupe","478":"Galloper","480":"H1","486":"Atos","489":"XG","490":"Trajet","494":"Santa Fe","496":"Elantra","497":"Tucson","499":"Matrix","501":"Terracan","508":"Grandeur","515":"i30","520":"i10","522":"ix55","523":"i20","4940":"ix35","5220":"ix20","5222":"Genesis","5280":"Veloster","10198":"i40","15598":"Grand Santa Fe","16171":"Ioniq","16307":"H350","16358":"Kona","16541":"MODEL","16677":"Kona Electric","16678":"Ioniq Electric"},"108":{"525":"Neon","526":"Stratus","527":"Vision","528":"New Yorker","529":"Voyager","531":"PT Cruiser","532":"Grand Voyager","533":"Sebring","536":"Saratoga","537":"Le Baron","539":"Viper","543":"300 M","551":"Crossfire","554":"300 C","16542":"MODEL"},}

Raw data who I display by JSON.striginfy:

enter image description here

MY CODE:

component.ts

vehicleModels;
dataIsReady = false;

 constructor(
    private vehicleService: VehicleService,
  ) { }

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

 public getModels() {
    this.vehicleService.getBrandsModels().subscribe(({ models }) => {
      this.vehicleModels = JSON.stringify(models);
      this.dataIsReady = models;
      console.log(models);
    });
  }
}

component.html

<div *ngIf="dataIsReady">
  <p>{{vehicleModels}}</p>
</div>

I expecting displaying this data in component for example:

102: 173 - AX, 175 - ZX,
103: 244 - Tico, 245 - Nexia

How to correct display this data?

Solution

  • You may do so using the following code on the template by using the keyvalue pipe:

    <div *ngFor="let obj of vehicleModels | keyvalue">
    <div>
        <strong>{{obj.key}}:</strong>
    </div>
    <div *ngFor="let inner of obj.value | keyvalue" style="margin-left: 10px;">
        <span>{{inner.key}}</span> -
        <span>{{inner.value}}</span>
    </div>
</div>