Discussion :

[corentinJacob]

Bonjour à toutes et à tous,
je rencontre un léger problème face à une requête Get sous Angular 7 avec pour back JavaSpringBoot le tout auto-généré par Jhipster.

Mon problème est le suivant :
J'obtiens un réponse 200 sur ma requête de l'api. Donc vous allez me dire c'est parfait etc, oui mais, le retour du json est particulier :
.
Donc en l’occurrence nous avons un body qui nous forme une array avec 11 entrée puis à l'intérieur de celui-ci une liste numérotée de 0 à 10 qui nous donne enfin nos données.

Je vous mets donc m'a function dans le component.ts :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
getAllPortefeuilles() {
    this.portefeuilleService.query().subscribe((portefeuille: HttpResponse<IPortefeuille[]>) => {
      this.getportefeuille(portefeuille.body, portefeuille.headers);
      console.log(portefeuille.body);
    });
    return;
  }

avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
protected getportefeuille(data: IPortefeuille[], headers: HttpHeaders) {    this.portefeuille = data;
  }

et pour crée celle-ci je me suis appuyé sur le service portefeuille.service qui nous donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
query(req?: any): Observable<EntityArrayResponseType> {    const options = createRequestOption(req);
    return this.http.get<IPortefeuille[]>(this.resourceUrl, { params: options, observe: 'response' });
  }
 
  search(req?: any): Observable<EntityArrayResponseType> {
    const options = createRequestOption(req);
    return this.http.get<IPortefeuille[]>(this.resourceSearchUrl, { params: options, observe: 'response' });   }

Et dans ma partie html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div *ngFor="let portefeuille of portefeuilles" class="jumbotron">
            <h4>{{portefeuille.title}}</h4>
        </div>

Et pour finir nous avons côté java :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
     * {@code GET  /portefeuilles} : get all the portefeuilles.
     *
     * @param pageable the pagination information.
     * @param queryParams a {@link MultiValueMap} query parameters.
     * @param uriBuilder a {@link UriComponentsBuilder} URI builder.
     * @return the {@link ResponseEntity} with status {@code 200 (OK)} and the list of portefeuilles in body.
     */
    @GetMapping("/portefeuilles")
    public ResponseEntity<List<Portefeuille>> getAllPortefeuilles(Pageable pageable, @RequestParam MultiValueMap<String, String> queryParams, UriComponentsBuilder uriBuilder) {
        log.debug("REST request to get a page of Portefeuilles");
        Page<Portefeuille> page = portefeuilleRepository.findAll(pageable);
        HttpHeaders headers = PaginationUtil.generatePaginationHttpHeaders(uriBuilder.queryParams(queryParams), page);
        return ResponseEntity.ok().headers(headers).body(page.getContent());
    }

J'obtiens donc un success, mais rien ne s'affiche sans raison réelle ???
J'ai pas mal cherché et pas moyens de mettre la main sur un exemple concret ou qui s'approche de mon cas..
Si un génie aurait la capacité à aider un débutant en web, je serais très appréciable et j'en serais très reconnaissant.
En vous souhaitant une agréable soirée ! Merci d'avance chère amis développeur.

[NoSmoking]

Bonjour,
d'un côté on a

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.portefeuille = data;

et de l'autre

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div *ngFor="let portefeuille of portefeuilles" class="jumbotron">

il y a un s qui manque (ou en trop) quelque part.

[corentinJacob]

Merci de ta réponse, sa m'a fortement aidé !

J'ai finalement changer mon component.ts :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

portefeuilles: IPortefeuille[];

avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
getAllPortefeuilles() {
    this.portefeuilleService.query().subscribe((portefeuille: HttpResponse<IPortefeuille[]>) => {
      this.getportefeuille(portefeuille.body, portefeuille.headers);
    });
    return;
  }

puis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
protected getportefeuille(portefeuille: IPortefeuille[], headers: HttpHeaders) {
    this.portefeuilles = portefeuille;
    console.log(portefeuille);
    console.log(headers);
  }

et coté html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 <div *ngFor="let portefeuille of portefeuilles" class="jumbotron">
            <h4>{{portefeuille.title}}</h4>
        </div>

Du coup, c'était bien le s mais coté function !
Je vous remercie de votre aide, et je marque le sujet comme résolu !
Merci encore en vous souhaitant une agréable journée !