Difficulty to display json object from an api in angular 12-CodePudding

I'm sorry by advance i will not be precise on the terms.

I'm in traineeship and I have to display the json content of an api. I'm able to use console.log and to see the data, but I can't display what i have to display in my html.

Where i want to go in the object. And that's where i go at most with the pipe keyvalue.

So here is my component.html:

<div style="text-align:center">
<h1>
  Welcome!
</h1>
<input type="text" class="form-control" [(ngModel)]="sujetRecherche">
    <button (click)="getData()" >Fetch Data</button>   
</div>

<div *ngFor="let these of thesesFromWebsite | keyvalue">
            {{these.key}}: {{these.value}}
</div>

and here is my component.ts

 import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { TheseFromWebsite } from 'src/app/models/theseFromWebsite.model';
import { ListTheseFromWebsite } from 'src/app/models/listTheseFromWebsite.model';
import { pipe } from 'rxjs';
import { map } from 'rxjs/operators';


@Component({
  selector: 'app-recuperation-theses-site-officiel',
  templateUrl: './recuperation-theses-site-officiel.component.html',
  styleUrls: ['./recuperation-theses-site-officiel.component.css']
})
export class RecuperationThesesSiteOfficielComponent implements OnInit {
  
  thesesFromWebsite?:ListTheseFromWebsite[];
  sujetRecherche='';
  

  constructor(private http: HttpClient) {
   
}
  ngOnInit(): void {
  }

  getData(): void {
    const urlThesesSite= "http://www.theses.fr/?q=" this.sujetRecherche "&fq=dateSoutenance:[1965-01-01T23:59:59Z+TO+2031-12-31T23:59:59Z]&checkedfacets=discipline=Informatique;&start=0&status=&access=&prevision=&filtrepersonne=&zone1=titreRAs&val1=&op1=AND&zone2=auteurs&val2=&op2=AND&zone3=etabSoutenances&val3=&op3=AND&zone4=dateSoutenance&val4a=&val4b=&type=&format=json"
    this.http.get</*any*/[]>(urlThesesSite)
    .subscribe(
      (data)=>{
        this.thesesFromWebsite = data;
        console.warn(typeof(this.thesesFromWebsite));
        console.log(this.thesesFromWebsite);   
        },    
    error => {
      console.log(error);
    });
    
  }

  
}

Can you please help me? Thank you!

edit: here is the link to the json data as askedenter link description here

CodePudding user response：

try this:

<div *ngFor="let these of thesesFromWebsite | keyvalue">
            {{these.key}}: 
      <div *ngFor="let item of these.value | keyvalue">{{item.key}}: {{item.value}}</div>
</div>

CodePudding user response：

use this :

<div *ngFor="let these of thesesFromWebsite | keyvalue">
            {{these.key}}:{{this.value | json}} 
<div>