Données Json -> controller Symfony

Version imprimable

20/11/2020, 18h00
boby057

Données Json -> controller Symfony

Bonsoir,

Actuellement je cherche à manipuler des données issues d'une requête Ajax, visant une API(TMDB). Coté front je récupère donc sans problème mes data en format Json celà depuis une recherche sans intégrer un formulaire symfony, et donc simplement un champ input dans la vue twig. J'ai donc bien une route dédié à cette fonction recherche mais je ne sais comment récupérer ces données Json de la recherche pour les manipuler dans le controller.. l'idée au finale étant de récupérer les propriétés d'un film pour ensuite les stocké en bdd.

Si des personnes pouvant m'éclairer..
Merci d'avance.

Bonne soirée.
Bon WE.
20/11/2020, 19h26
Skunka

Salut,

Si je comprend bien, tu as une fonction javascript qui récupère des données depuis un input. Tu souhaites envoyer ces données grâce à une requête Ajax vers ton contrôleur Symfony et tu cherches comment les récupérer depuis ce contrôleur pour les manipuler ?

Si tu passes ces données via la méthode "POST", il te faut utiliser l'objet Reques: Symfony request object

En espérant avoir correctement compris pour t'avoir orienté comme il faut!

Cordialement,
Skunka.
25/11/2020, 15h00
boby057

Salut,
Merci de ta réponse.

Alors oui, cependant est-ce que je dois faire une autre requete dans mon script JS indiquant la route adéquate.
Dans ma vue Twig pour le moment je n'ai qu'un input relier a mon script js. Aucun formulaire Symfony basé sur entité n'a été créer pour la vue Twig.

Cordialement.
25/11/2020, 15h21
Skunka

Salut,

Pas besoin d'une requête supplémentaire mais juste une petite astuce que j'utilise sur mes projets. Comme tu n'as pas mis ton code, je vais essayer d'être clair mais dans le cas où tu n'as pas tout compris, n'hésite pas à mettre ton code dans la discussion :)

J'imagine que tu as un bouton sur lequel tu as ajouté un eventListener pour déclencher ton script js. Tu peux rajouter à ce bouton un attribut que je nomme "path" et lui mettre comme valeur ta route grâce à Twig:

Code:

<button path="{{ path('nom_route') }}">Valider</button>

Ainsi, tu n'as plus qu'à récupérer cet attribut dans ton script js afin de définir le chemin de ta requête AJAX.

Cordialement,
Skunka.

Ca sera évidemment plus clair en partageant mon code

Script JS

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
 
 
/**
 * Appel API Recherche Films [GET Search]
 * @function getMovies
 */
function getMovies() {
    xhr.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            //* Si la requete est terminée et que la réponse est prête||Status OK
            var data = JSON.parse(this.response); // * Données JSON traitées
            console.log(data);
            for (i = 0; i < data.results.length; i++) {
                Aff_cardMovies(data);
                // valid_msg(success);
            }
        } else if (this.readyState === 4 && this.status === 404) {
            alert("Erreur 404 :/");
        }
    };
    xhr.open(
        "GET",
     baseURL +
        "search/movie?api_key=" +
        key +
        "&language=" +
        lang +
        "&query=" +
        saisie_movie.value,
        true
    ); //* Initialisation de l'objet avant de l'envoyé | Asynchrone
    xhr.send(); //Envoi de la requête vers serveur
}

Controller.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
  /**
     * @Route("/movie/search", name="movie_search")
     */
    public function search()
    {
 
 
        return $this->render('movie/search.html.twig', [
 
        ]);
    }

Vue Twig

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
 
{% extends 'base.html.twig' %}
{% block title %}Search{% endblock %}
{% block stylesheets %}
    {{ encore_entry_link_tags('app') }}
    {{ encore_entry_link_tags('search') }}
{% endblock %}
 
{% block body %}
    <h1 class="title">Rechercher un film</h1>
    <div class="search-bar">
        <label for="search_input"></label>
        <input type="search" id="search_input" class="input"
               placeholder="Saisir un film..">
        <button class="search-btn" id="search_btn" type="submit">
            <i class="fas fa-search"></i>
        </button>
    </div>
    <div class="row row-cols-1 row-cols-md-6" id="cardgroup">
        {# Affichage de la liste des cards #}
    </div>
 
    {% block javascripts %}
        {{ encore_entry_script_tags('tmdb') }}
    {% endblock %}
{% endblock %}

25/11/2020, 16h10
Skunka

De ce que je vois dans ton script js, tu renseigne déjà la route que tu souhaites requêter, dans ce cas pas besoin de mon astuce ^^

Comment se déroule ton processus actuellement ? Arrives-tu à requêter ton contrôleur ou non ? Arrives-tu à traiter les informations envoyées à ton contrôleur ou non ? Arrives-tu à retourner une réponse à ton script js ou non ? Je me suis un peu perdu dans tout ça et je ne vois plus clairement où se situe ton problème actuel ^^
25/11/2020, 16h19
boby057

Citation:

Envoyé par Skunka

De ce que je vois dans ton script js, tu renseigne déjà la route que tu souhaites requêter, dans ce cas pas besoin de mon astuce ^^

Comment se déroule ton processus actuellement ? Arrives-tu à requêter ton contrôleur ou non ? Arrives-tu à traiter les informations envoyées à ton contrôleur ou non ? Arrives-tu à retourner une réponse à ton script js ou non ? Je me suis un peu perdu dans tout ça et je ne vois plus clairement où se situe ton problème actuel ^^

Eh bien là je récupère sans problème les datas après communication avec l'API, dans le but de faire apparaitre une liste de film sous la forme de cards(créer en JS). Ces datas cependant je souhaite les manipuler coté BACK puisque j'aimerais par exemple une fois la liste de cards affichés, ajouté un film en question vers la bdd (d'où mon titre du sujet).

Si c'est plus claire..
25/11/2020, 16h38
Skunka

Donc le script js que tu m'as fournis correspond à ta requête vers l'api pour récupérer des données de film et non soumettre un film à ton contrôleur ?

Si c'est le cas, il te faut effectivement créer une fonction javascript qui enverra les données d'un film à ton serveur.

En me basant sur ton code, quand tu crées une card pour un film, tu as sûrement un bouton du genre "Sauvegarder en base" sur lequel tu peux placer l'évènement onclick avec les données du film comme paramètre pour faire appel à ta nouvelle fonction javascript.
Cella va gérer la requête AJAX, en méthode GET.
L'url sera celle de la fonction de ton contrôleur que tu as définis via annotations.
Dans ton contrôleur, tu utilisera l'objet Request de Symfony afin de récupérer les données de ton film (je t'avais mis un lien dans un précédent message si besoin).
Une fois les données récupérer, tu n'as plus qu'a créer un nouvel objet "Film" (ou suivant comment tu as nommées ces objets dans ton projet) pour le persist vers ta base.
Pour finir, ton contrôleur va retourner une réponse JSON à ton script pour afficher un message d'erreur ou de succès à l'utilisateur.

J'ai bien cerné ce que tu souhaites faire (récupérer des films via API puis choisir parmi les films ceux que tu souhaites save en bdd?) et j'espère t'avoir décris correctement le processus. Je pense que tu devrais pouvoir y arriver mais si après plusieurs essaies tu restes bloqués, n'hésites pas à revenir en me montrant ton code mis à jour (nouvelle fonction js, fonction add_card(), contrôleur et ta classe Film ou équivalent).

Voilà, pour le moment aucune soumission vers le controlleur.

Alors j'ai effectivement un bouton d'ajouter de créer en js, sur lequel je peux ajouter un EventListener
ScriptJS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function aff_cards(data){
....
...
// * ADD BTN
    let add_btn = document.createElement("button");
    add_btn.innerText = "Ajouter"
    add_btn.className = "btn_add";
    add_btn.addEventListener('click', function(){
       send(data);
    })
}
 
function send(dataMovies) {
    xhr.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
           // Mes datas
        } else if (this.readyState === 4 && this.status === 404) {
            alert("Erreur 404 :/");
        }
        xhr.open('GET', '/movie/search', true);
        xhr.send();
    }
}

Pour cette fonction, comment je récupère du coup les data à l'issue de la requête pour ensuite les passer dans ma fonction send() ? malgré la portée des variables et paramètres, ce n'est aps pris en compte

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
function getMovies() {
    xhr.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            //* Si la requete est terminée et que la réponse est prête||Status OK
            let data = JSON.parse(this.response); // * Données JSON traitées
            console.log(data);
            for (i = 0; i < data.results.length; i++) {
                Aff_cardMovies(data);
                // valid_msg(success);
            }
        } else if (this.readyState === 4 && this.status === 404) {
            //* Affichage d'un message d'erreur si status invalide
            alert("Erreur 404 :/");
        }
    };
    xhr.open(
        "GET",
        baseURL +
        "search/movie?api_key=" +
        key +
        "&language=" +
        lang +
        "&query=" +
        saisie_movie.value,
        true
    ); //* Initialisation de l'objet avant de l'envoyé | Asynchrone
    xhr.send(); //Envoi de la requête vers serveur
}

Au finale rien ne m'empêche pour le moment de lancer l'autre requête dans la méthode getMovies() juste après avoir affiché la liste de film.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function getMovies() { xhr.onreadystatechange = function () { if (this.readyState === 4 && this.status === 200) { let data = JSON.parse(this.responseText); console.log(data); for (i = 0; i < data.results.length; i++) { cardMovies(data); console.log(sendToController(data)); } } else if (this.readyState === 4 && this.status === 404) { alert("Erreur 404 :/"); } }; xhr.open("GET", baseURL + "search/movie?api_key=" + key + "&language=" + lang + "&query=" + saisie_movie.value, true); xhr.send(); } function sendToController(movie) { xhr.open("GET", "/movie/search/" + movie, true); xhr.send(); }
Sauf qu'ici je fais passer un contenu JSON vers le controleur au sein de l'URL movie/search/{movie} correspondant à ma recherche et où j'obtiens une erreur..

"VM230:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0

at JSON.parse (<anonymous>)"

Les datas sont pourtant déjà parsé ?

Pour le moment dans mon contrôleur je fais un simple dd de la request mais la communication est bien établi entre le front et le back (ayant déjà essayé de retourner une JSONResponse)
Code:

1 2 3 4 5 6 7 8 9 +attributes: Symfony\Component\HttpFoundation\ParameterBag {#98 #parameters: array:6 [ "_route" => "app_movie_search" "_controller" => "App\Controller\MovieController::searchAction" "movie" => "[object Object]" "_route_params" => array:1 [ "movie" => "[object Object]" ]