Discussion :

[olivier252]

Hello,
Me revoilà

Je cherche à passer un simple objet dans un datasource d'une table material comme ceci par exemple :

Code :

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

1
2
3
4
5
6
7
 
{
      "codeModele": "3223er",
      "codeLibelle": "opl84",
      "stock": 12,
      "prixTTC": 29,
    }

J'ai l'impression que le datasource n'accepte que des tableaux d'objets dans la doc (mais je lis mal la doc des fois...)

J'aimerais pouvoir avec un ngFor "eplucher" les membres de l'objet dans 2 colonnes l'une pour les propriétés et une pour les valeurs
Merci à toi

[krakatoa]

tu as bien suivis cet exemple ?


https://material.angular.io/components/table/overview

[olivier252]

En fait, cet exemple montre le système avec un tableau d'objet et ça j'arrive à le manipuler en attribuant une colonne pour chaque propriété. Dans mon cas, je n'ai qu'un objet avec plusieurs paires propriété: valeur et je voudrais une colonne
qui affiche les propriétés et une autre les valeurs un peu comme un for...in dans la doc MDN

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
const object = { a: 1, b: 2, c: 3 };
 
for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}
 
// expected output:
// "a: 1"
// "b: 2"
// "c: 3"

Sauf qu'il faudrait que j'arrive à faire ça dans mon template en fait..

[krakatoa]

donc il faut convertir tes données de départ

Code :

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

1
2
 
const object = { a: 1, b: 2, c: 3 };

en un tableau d'objet comme ça :

Code :

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

1
2
3
4
5
6
 
[
  {key: a, value: 1},
  {key: b, value: 2},
  {key: c, value: 3},
]

ainsi tu pourras le transmettre au data table sous cette forme !

je te laisse essayer de faire ça, si tu n'arrive pas je peux t'aider

[olivier252]

yep, effectivement, je me demandais si il falait que j'en passe par là, je pense que j'ai réglé le problème grace à un ceci

Code :

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

1
2
 
this.productSelected = Object.entries(value).map((e) => ( { [e[0]]: e[1] } ));

Mais le mal est plus profond : je galère sur un autre point j'ai une erreur 404 lorsque je veux récupérer un objet ça doit l'observable qui n'est pas bonne
Dans mon appli je souhaite en fait afficher un objet "product" dans un composant nommé "product" par une propriété codemodele qui fait office d'id, jusque là rien de fou.
Pour cela je dois rentrer mon fameux code modele (un code à 3 chiffres) dans un input, et à la vaildation je devrais aficher le produit dans le data table. mais rien ne se passe...

Côté back-end j'ai un fake en json-server

service :

Code :

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

1
2
3
4
5
6
 
baseURL: string = "http://localhost:3000/";
..................................
getProductByCodeModel(codeModele: number): Observable<Product> {
    return this.http.get<Product>(`${this.baseURL}zone/${codeModele}`);
  }

ts

Code :

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

1
2
3
4
5
6
7
8
 
  onCheckRef() {
    let codemodele = this.refFormGroup.get('reference').value; // référence code modele d'un article
    this.sub = this.rayonService.getProductByCodeModel(codemodele).subscribe(value => {
      console.log(value);
this.router.navigate([`/zone/${codemodele}`]);
    });
  }

le html

Code :

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

1
2
3
4
 
<button (click)="onCheckRef()" matStepperNext>
      <mat-icon>done</mat-icon>
</button>

le backend :

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
16
17
18
19
20
21
22
23
 
{
  "product": [
    {
      "codeModele": 111,
      "codeLibelle": "879rty",
      "stock": 77,
      "prixTTC": 85,
      "couleur": "bleu",
      "matiere": "laine",
      "zone": "f15"
    },
    {
      "codeModele": 222,
      "codeLibelle": "opl84",
      "stock": 12,
      "prixTTC": 29,
      "couleur": "rouge",
      "matiere": "coton",
      "zone": "k14"
    }
  ]
}

le model

Code :

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

1
2
3
4
5
6
7
8
9
10
 
export class Product {
    codeModele: number;
    codeLibelle: string;
    stock: number;
    prixTTC : number;
    couleuyr: string;
    matiere: string;
    zone: string;
}

le routing

Code :

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

1
2
 
  { path: 'zone/:id', component: ProductComponent },

mon erreur

Jene comprends pas pourquoi j'ai un localhost 3000 et non 4200 d'ailleurs (c'est ce qui provoque l'erreur peut-être)

vloia...merci si tu vois l'erreur...

[krakatoa]

teste l'url avec postman

[olivier252]

Affaire à suivre...

[krakatoa]

erreur 404 arrive souvent quand une erreur coté serveur est généré !

[olivier252]

Suite et fin...
Postman me renvoyait un 404

Après 3 jours de souffrances, j'ai créé un server node.js à la place du json-server, et là ça fonctionne. C'est un peu long à expliquer ici
mais sinon mon exemple est par là dans le compo zone utility
https://github.com/olivier252/oliv-release

[krakatoa]

en effet, jsonserver est très pointilleux sur le json
le moindre petite incartade et tout l'ensemble s'écroule.

je ne sais pas quel back tu comptes utiliser en prod
mais si c'est un système de node.js
je te conseil le framework: NestJS (qui est très simple à utiliser)

[olivier252]

Les gars vont me donner une librairie d'API avec openApi (swagger) sur laquelle il faudra me brancher. Je peux pas t'en dire plus, à l'heure où j'écris ces lignes, j'ycomprends que dalle..
merci pr l'info sinon !

[krakatoa]

fastoche !

quand tu aura accès à swagger
tu verras une liste genre

POST /url/bidule
GET /url/bidule
...

tu t'en fout comment ça fonctionne, tu utilises ces urls et méthodes(POST, PUT...) dans ton projet angular pour envoyer, recuperer...
tu auras le rôle de consommateur api

pas plus compliqué que ça

[olivier252]

C'est qd le lead dev m'a montré l'environnment en 42 sec j'ai un peu flippé...la spécification openApi, le back en C#, l'editeur swagger et tout et tout. bon enfin apparement il m'a dit exactement la même chose que toi lol...

[krakatoa]

et oui
le back tu t'en fou. tu n'y toucheras pas (qu'il soit fait en php, en ruby, en c#, en assembleur...), c'est aux dev. backend de travailler dessus.
tu es un simple utilisateur

bon courage !

sache que parfois, il se peut qu'il y a une erreur sur le back. (sont humain comme nous)
t'essais d'envoyer une requete post avec le bon format des données et tu as un retour négatif de ta requête (surtout 404)
donc si tu es sur de ton coup tu peux le signaler aux backs !

pour vérifier, tu peux aussi faire une teste avec postman

[olivier252]

je vais bien me relire..