Affichage de données dans des SLIDES

Version imprimable

1 pièce(s) jointe(s)

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 :
Pièce jointe 623368

Puis le code de mon fichier ts :

Code:

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:

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

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:

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:

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

08/08/2022, 08h13
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

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

Code:

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:

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

08/08/2022, 11h17
AlexandreJcpn

1 pièce(s) jointe(s)

Bonjour,

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

Pièce jointe 623436

Code:

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 !
    })
  }

08/08/2022, 13h51
AlexandreJcpn

Je comprend pas comment déclarer "nom:" et "description:".

Pouvez vous m'expliquer ?

y'a rien à déclarer !
thius.products = <--- un tableau d'objets et un objet = { name: p.name, description: p.description }

je viens de m'apercevoir d'une erreur
ton code est truffés d'erreurs ! :aie:
Code:

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=> { name: p.name, description: p.description }) console.log("products", this.products); // on vérifie les données dans la console au cas ou ! }) }

08/08/2022, 14h23
AlexandreJcpn

1 pièce(s) jointe(s)

Non, ça ne fonctionne pas car il ne reconnait pas "name:" et "description:"

Pièce jointe 623451

je viens de m'apercevoir d'une erreur
ton code est truffés d'erreurs ! :aie:

Code:

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=> {
        name: p.name,
        description: p.description
      })
      console.log("products", this.products);   // on vérifie les données dans la console au cas ou !
    })
  }

Code:

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

08/08/2022, 14h41
AlexandreJcpn

De quelle erreur s'agit-il ?
Parce que je vois aucune différence avec ce que vous me proposé mise à part le "s" de product que j'ai fais exprès de ne pas le mettre

Code:

1
2
3
4
5
 
{
        name: p.name,
        description: p.description
      }

Code:

1
2
3
4
5
 
{
        name: p.name;
        description: p.description;
      }

08/08/2022, 14h47
AlexandreJcpn

1 pièce(s) jointe(s)

Ça ne fonctionne pas du tout ce que vous me proposez, la il me dit qu'il attend ";" et en plus on voit que name: n'est pas de la même couleur.
Je ne comprend vraiment pas ce qu'il se passe. J'espère que je vais réussir a m'en sortir. Dites moi ce que vous en pensez si vous voyez le problème :)

Pièce jointe 623453

1 pièce(s) jointe(s)

C'est bon j'ai enfin réussi ! Maintenant il me reste plus qu'a trouver la solution pour les afficher dans une slide différente avec le *ngFor :)

Voila le code qui fonctionne :
Code:

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.product = dataApi.map(p=>({ name: p.name, description: p.description })); console.log("products", this.product); }) }
Et le résultat dans le console.log
Pièce jointe 623454

juste pour info tu peux écrire aussi comme ça :

Code:

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

par convention, il faut mettre un s a products vu qu'il y en a plusieurs !

et il est de bonne pratique d'utiliser le typage: (éviter les : any)

Code:

1
2
3
4
5
 
export interface IProduct {
  name: string;
  description: string;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
products?: IProduct[];

alternativeProducts(categories: any) {  // au lieu de any utiliser le bon typage
    this.http.get('http://127.0.0.1:8001/api/products/liste/'+ categories)
    .pipe(   // utilisation de rxjs
       map((p: any) => {    // au lieu de any créer un type   ProductRequest ......
          name: p.name,
          description: p.description
       }
     )
    .subscribe((products:  IProduct[]) => {
      this.products = products;
    })
}

c'est dans quel cadre : perso, job, étudiant ?

09/08/2022, 10h21
AlexandreJcpn

Merci pour toutes ces informations, je vais regarder ça.

Étudiant.

J'ai une dernière question, je pense que vous pourrez me répondre car vous avez l'air bien calé sur Angular.
Dans les données que je récupère, je récupère des images aussi et la ça ne m'affiche que le nom de l'image enregistré dans l'API. J'ai commencé mes recherches mais pour le moment je n'ai rien trouvé de concluant.

Bien cordialement
09/08/2022, 10h54
dukoid

avoir le nom du fichier de l'image c'est bien mais il faut les données de l'image !

cette image (les données) se trouve ou physiquement ?
- dans le dossier assets d'angular ?
- dans un serveur web distant ? (donc avoir son url complet)

1 pièce(s) jointe(s)

Afficher une image récupéré d'une API pour chaque produit

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:

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:

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:
Pièce jointe 623516

09/08/2022, 16h30
NoSmoking

Bonjour,

Citation:

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.
10/08/2022, 08h12
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

1 pièce(s) jointe(s)

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

ts:

Code:

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:

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:
Pièce jointe 623539

10/08/2022, 16h03
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.

Fuseau horaire GMT +2. Il est actuellement 20h29.