-1

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%2BTO%2B2031-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

ryoune
  • 1
  • 2
  • Hi can you attach the complete JSON response data to the question? Thanks. – Yong Shun Oct 04 '21 at 08:16
  • @YongShun hi! is that what you want? https://theses.fr/fr/?q=lala&format=json – ryoune Oct 04 '21 at 08:28
  • Yes, you may attach the link to the question. The JSON response may useful for solving your question. – Yong Shun Oct 04 '21 at 08:32
  • Huge data. Anyway in a quick solution [`JsonPipe`](https://angular.io/api/common/JsonPipe) will be able to convert it to readable JSON string. `{{ these.value | json }}` – Yong Shun Oct 04 '21 at 08:52
  • thanks a lot, and if i want the data of only one of the 3 elements, do you know how i can do please? (sorry for X thousand question...) – ryoune Oct 04 '21 at 09:03
  • If you want one of these 3 elements, I would suggest don't use `
    ` in HTML. You should directly specify the element needed. For example: `
    `.
     – Yong Shun Oct 04 '21 at 09:07
  • And would suggest to design/use POCO object to display your data. So you have the *power* to decide which property will show/not to show. `KeyValuePipe` will display all the keys, values which include those properties you may don't want to show. – Yong Shun Oct 04 '21 at 09:10
  • 1
    thanks, i will go look what a POCO object is, and i will try to use it ;) once again, thank you a lot. – ryoune Oct 04 '21 at 09:25
  • You're welcome. Not sure you are C# developer or not. As this term is **plain old CLR object** for C#. In short, it means the object class which is designed for data transfer. This means that you need to design the interface/class that is specifically used for displaying; for your scenario. – Yong Shun Oct 04 '21 at 09:32
  • 1
    oh, i'm absolutly not C# dev.. but i think angluar as something similar, it's a model that i have to do? @YongShun – ryoune Oct 04 '21 at 09:46

2 Answers2

0

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>
Ali Nadirkhanloo
  • 106
  • 5
  • Hello, thanks, but it returns me this error: No overload matches this call. The last overload gave the following error. Argument of type 'number | ListTheseFromWebsite | (() => string) | (() => string) | (() => ListTheseFromWebsite | undefined) | ((...items: ListTheseFromWebsite[]) => number) | ... 26 more ... | (() => { ...; })' is not assignable to parameter of type 'Record | ReadonlyMap<...> | null | undefined'. – ryoune Oct 04 '21 at 08:44
  • can you give me the complete JSON response data? – Ali Nadirkhanloo Oct 04 '21 at 08:49
  • yup, i put it in the question, in the edit here it is: theses.fr/fr/?q=lala&format=json – ryoune Oct 04 '21 at 08:54
0

use this :

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