Angular (Ionic) - API - Comment poster un tri de données?

Version imprimable

2 pièce(s) jointe(s)

Hello,

Je m'entraine Angular en suivant un cours Udemy et là, j'ai eu envie de tester un truc mais je bloque.

Sur ma page, j'ai bien les éléments que je veux trier

Pièce jointe 583996

Dans la console, j'ai les valeurs et les éléments affichés
Pièce jointe 583997

Je veux envoyer ces données à Symfony. Le Get fonctionne bien depuis une autre page url avec un code similaire

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  ngOnInit() {
    try {
      // if (this.priosService == null) return throwError('null data');
      this.http.get<any[]>(this.apiUrl)
          .subscribe(data => {
            this.prios = data;
          });
      // }
      // return this.data;
    } catch(data) {
      console.log("Tombé à l'eau");
      console.log(data);
    }
  }

est ce que la méthode d'envoyer ces données comme cela peut fonctionner:

Code:

1
2
3
4
5
6
7
8
9
10
11
  postData() {
    let url = `${this.apiUrl}/`;
    this.http
        .post(url, {
          prio1: "price",
          prio2: this.item[0],
          prio3: this.item[1],
          prio4: this.item[2]
        })
        .subscribe(res => console.log(this.http.post()));
  }

Le code global est :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 prios: Prios[];
  apiUrl = 'http://localhost:8000/api/prio';
  listItems: any;
  item = [
    // {value: 'Price', viewValue: ' Price'},
    { value: "New", viewValue: "Release Date of product" },
    {
      value: "Size",
      viewValue: "Size of product"
    },
    {
      value: "Area",
      viewValue: "Product delivery area"
    }
  ];
 
  constructor(private http: HttpClient) {
    this.listItems = [
      // 'Price',
      "Release Date of product",
      "Size of product",
      "Product delivery area"
    ];
  }
 
  ngOnInit() {
    this.http.get<any[]>(this.apiUrl).subscribe(data => {
      this.prios = data;
    });
  }
 
  postData() {
    let url = `${this.apiUrl}/`;
    this.http
        .post(url, {
          prio1: "price",
          prio2: this.item[0],
          prio3: this.item[1],
          prio4: this.item[2]
        })
        .subscribe(res => console.log(this.http.post()));
  }

J'ai aussi mis sur stackblitz mais il est non fonctionnel
https://stackblitz.com/edit/ionic-wh...t.component.ts

15/11/2020, 15h14
dukoid

erreur 500 veut dire que le serveur n'a pas fait de retour surement que ça bugues coté serveur
donc angular n'a pas de retour

aller voir l'action dans Symfony ou il récupère le post

1 pièce(s) jointe(s)

Merci.

Du côté de Symfony, ma requête était basique:

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
27
28
29
30
31
/**
    * @Route("/api/prio", name="api_prio_store", methods={"POST"})
    */
 
public function store(Request $request, SerializerInterface $serializer, EntityManagerInterface $entityManager, ValidatorInterface $validator)
{
 
    try {
        $jsonRecu = $request->getContent();
 
        $prio = $serializer->deserialize($jsonRecu, Priorisation::class, 'json');
 
        $errors = $validator->validate($prio);
 
        if(count($errors) > 0){
            return $this->json($errors, 400);
        }
 
        $entityManager->persist($prio);
        $entityManager->flush();
//        dd($prio);
 
        return $this->json($prio, 201, [], ['groups' => 'prio:read']);
    } catch (NotEncodableValueException $e) {
        return $this->json([
            'status' => 400,
            'message' => $e->getMessage()
        ], 400
        );
    }
}

Il fonctionnait en POST direct depuis Postman mais ai essayé un truc plus court là pour le test mais ai maintenant une erreur 405 avec ce code:

Code:

1
2
3
4
5
6
7
8
9
10
 
    public function store( Priorisation $priorisation, EntityManagerInterface $entityManager )
    {
        $entityManager = $this->getDoctrine()->getManager();
 
        $entityManager->persist($priorisation);
        $entityManager->flush();
 
        return $priorisation;
    }

Du côté de Angular, j'ai modifié le code pour tester les 2 URL (avec mon API et avec APIplatform):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
// apiUrl2 = 'http://localhost:8000/api/prio';
  apiUrl2 = 'http://localhost:8000/apip/priorisations/{id}';
  postData(){
    this.http.post<any[]>(this.apiUrl2,{ prio1:'price', prio2: this.item[0], prio3: this.item[1], prio4: this.item[2] }).
    subscribe(
        (data: any[]) => {
          // console.log(data);
          this.prioId = data.id;
          return this.data.push(data);
        }
    )
  }

J'ai dû me planter sur la connexion car les données récupérées via GET ressortent bien du côté Angular et/ou Phpmyadmin.
Pièce jointe 584025

J'ai aussi testé en ajoutant un paramconverter dans les annotations du post:

Code:

1
2
3
4
5
6
    /**
     * @Route("/api/prio", name="api_prio_store", methods={"POST"})
     * @ParamConverter("priorisation", options={"mapping": {priorisation_id"   : "id"}})
     *
     * @Template()
     */

Mais j'ai un nouveau message d'erreur car je n'ai jamais utilisé jusque là les params converter et ne suis pas sûr de l'avoir bien employé:

Citation:

App\Entity\Priorisation object not found by the @ParamConverter annotation.

Je suis preneur pour toute info ou aide :)

15/11/2020, 20h34
krakatoa

si tu debutes, t'embete pas avec les params converter après faut voir avec le forum symfony

dans l'action POST de symfony

tu peux faire un dump('test de la mort'); exit;
tu lances angular
tu vas dans l'onglet reseaux des outils de dev du navigateur
tu submit le formulaire
dans l'onglet Response de la requête en question
tu devrais retrouver 'test de la mort'