Discussion :

[AlexandreJcpn]

Bonjour,

Je viens vers vous car j'ai un petit problème, je récupère un tableau de données d'une API que j'exploite avec "map" mais l'inconvénient c'est que je n'arrive pas a trouver la solution pour afficher les noms que je récupère dans cette boucle dans mes slides.

Je vous montre que j'arrive bien à récupérer les deux noms dans le console.log :


Puis le code de mon fichier ts :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
alternativeProducts(categories:any) {
    this.http.get('http://127.0.0.1:8001/api/products/liste/'+ categories)
    .subscribe((dataApi:any) =>{
      // console.log(dataApi);
      dataApi.map(p=>{
        p.name;
        p.description;
      })
        console.log(dataApi.map(p=>p.name));
    })
  }

Ainsi que mon code HTML:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="accordion">
      <ul>
        <li>
          <input type="checkbox" checked>
          <i></i>
          <h2>Trouver un produit similaire</h2>
            <!-- <ion-card>
              <ion-item>
                {{nameProduct}}
              </ion-item>
            </ion-card> -->
            <ion-slides [options]="option" margin="ion-margin-top">
              <ion-slide>
                <ion-card>
                  {{p.name}}
                </ion-card>
              </ion-slide>
            </ion-slides>
        </li>
        <li>
          <input type="checkbox" checked>
          <i></i>
          <h2>Blablablabla</h2>
        </li>
      </ul>
    </div>

En espérant qu'un de vous pourra m'aider.
Bien cordialement,
Alexandre

[dukoid]

déjà, je vois du rouge dans la console. ce n'est pas bon et empeche l'execution de la suite du code.

ensuite tu récupères des données de l'api mais il faut le passer à la vue... tu ne semble pas le faire

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
product: any;    // pour la vue
...
...
alternativeProducts(categories:any) {
    this.http.get('http://127.0.0.1:8001/api/products/liste/'+ categories)
    .subscribe((dataApi:any) =>{
      this.product = dataApi.map(p=>{
        p.name;
        p.description;
      })
    })
  }

template

Code :

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

1
2
3
 
{{ product.name }}
{{ product.description}}

[AlexandreJcpn]

Bonjour,
Merci pour ton aide mais malheureusement ça ne fonctionne pas.
Oui, le rouge c'est car il y a un problème au niveau de la récupération de la variable.

J'espère trouver une solution rapidement.

Bien cordialement,
Alexandre

[dukoid]

désolé j'ai écrit de la merde ! pas vu le nombre....
donc il y a plusieurs produits

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
products: any;    // pour la vue
...
...
alternativeProducts(categories:any) {
    this.http.get('http://127.0.0.1:8001/api/products/liste/'+ categories)
    .subscribe((dataApi:any) =>{
      this.products = dataApi.map(p=>{
        p.name;
        p.description;
      })
      console.log("products", this.products);   // on vérifie les données dans la console au cas ou !
    })
  }

Code html :

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

1
2
3
4
<div *ngFor="let product of products">
   {{ product.name }}
   {{ product.description}}
</div>

[AlexandreJcpn]

Bonjour,

Ça me renvoie "undefined". Je ne comprend pas pourquoi cela ne fonctionne pas.

[dukoid]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
products: any;    // pour la vue
...
...
alternativeProducts(categories:any) {
    this.http.get('http://127.0.0.1:8001/api/products/liste/'+ categories)
    .subscribe((dataApi:any) =>{
      this.products = dataApi.map(p=>{
        name: p.name;
        description: p.description;
      })
      console.log("products", this.products);   // on vérifie les données dans la console au cas ou !
    })
  }

[AlexandreJcpn]

Bonjour à tous,

J'ai créé une API qui récupère des données dans une bdd phpmyadmin puis je les envoie sur mon app Angular.
J'affiche ces données dans des slides mais je ne vois pas comment faire pour que l'image s'affiche, pour le moment j'affiche juste le nom de l'image.
Comment faire pour que ce soit l'image qui s'affiche et non le nom ?

fichier ts :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
alternativeProducts(categories:any) {
    this.http.get('http://127.0.0.1:8001/api/products/liste/'+ categories)
    .subscribe((dataApi:any) =>{
      this.products = dataApi.map(p=>({
        image: p.image,
        name: p.name,
        description: p.description
      }));
        console.log(dataApi);
        console.log("products", this.products);
    })

fichier html :

Code html :

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

1
2
3
4
5
6
7
<ion-slides [options]="option" margin="ion-margin-top">
              <ion-slide *ngFor="let product of products">
                {{ product.image}}
                {{ product.name }}
                {{ product.description}}
              </ion-slide>
            </ion-slides>

Screen de la page avec la console:

[NoSmoking]

Bonjour,

mais je ne vois pas comment faire pour que l'image s'affiche, pour le moment j'affiche juste le nom de l'image.

il te faut mettre le nom (du fichier) de l'image dans une balise <img> dans l"attribut src comme on le fait en HTML.

[AlexandreJcpn]

Bonjour,

J'ai déjà essayé de faire ce vous m'avez dit et ça ne fonctionne pas.
Je pense qu'il y a une manière particulière pour afficher les images qui viennent d'une API. C'est sur ça que j'aimerai avoir des informations.

Bien cordialement

[AlexandreJcpn]

Je vous montre comment j'ai essayé de faire ça.

ts:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
alternativeProducts(categories:any) {
    this.http.get('http://127.0.0.1:8001/api/products/liste/'+ categories)
    .subscribe((dataApi:any) =>{
      this.products = dataApi.map(p=>({
        image: p.image,
        name: p.name,
        description: p.description
      }));
        console.log(dataApi);
        console.log("products", this.products);
    })
  }

html:

Code html :

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

1
2
3
4
5
6
7
<ion-slides [options]="option" margin="ion-margin-top">
              <ion-slide *ngFor="let product of products">
                <img id="myimage" [src]='product.image' />
                {{ product.name }}
                {{ product.description}}
              </ion-slide>
            </ion-slides>

screen résultat:

[NoSmoking]

Si les erreurs 404 concernent les fichiers images il serait bon de vérifier le chemin d'accès à ces fichiers, ils doivent également faire partie de l'attribut src.