Discussion :

[HitoSam]

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



Dans la console, j'ai les valeurs et les éléments affichés


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

Code :

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

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 :

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

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 :

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
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

[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

[HitoSam]

Merci.

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

Code php :

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
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 php :

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

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 :

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

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.


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

Code php :

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

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é:

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

Je suis preneur pour toute info ou aide

[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'