Faire une requête Ajax

Version imprimable

04/05/2022, 16h38
chaaa.info

1 pièce(s) jointe(s)

Faire une requête Ajax

Bonjour,

Je dois faire un formulaire de recherche avec plusieurs champs. Je dois récupérer les données depuis le site https://opendata.paris.fr/explore/da...&sort=-commune

Pour cela je dois faire une requête Ajax, sauf que je n'ai jamais utilisé Ajax et c'est justement un projet pour apprendre.

Voici une capture du formulaire simple en HTML :

Pièce jointe 618500

J'aimerais recevoir des conseils et des pistes,

Merci par avance
04/05/2022, 16h53
Philcmoi

2 mannieres d'approcher Ajax

Quel langage utilises tu ?
Php ou Java ?
Saits tu utiliser Jquery ?
04/05/2022, 17h35
chaaa.info

Pour l'instant je n'ai fait que le code HTML qui s'appelle "vueformulaire.html", et j'ai fait un autre fichier pour traiter le formulaire "resultat.php", mais je n'ai pas encore écrit de code.

Non, je ne sais pas utiliser JQuery
04/05/2022, 22h14
Sparky95

Bonjour,

Je penses que le plus simple est que tu commences pas te documenter un peu ;-) https://ajax.developpez.com/cours/
Histoire également de comprendre un peu ce qu'est l'Ajax et comment cela fonctionnes.
Après si tu galère encore YouTube est ton poto :D.

Pour résumer, ton Ajax devras obligatoirement être fait en JavaScript ou l'un de ses dérivés (TypeScript ou jQuery).
Étant débutante, je te conseil de directement de passer à du jQuery (c'est pas top car tu n'apprends pas le Js mais tu avancera beaucoup plus vite)

Perso j'ai commencé avec le jQuery, je n'ai jamais vraiment appris le JS, car je le trouvais trop lourd et j'ai pas mal suivi de tuto via YouTube.

Aujourd'hui je suis en entreprise on fait du TypeScript qui est assez puissant mais question plaisir, je garde une préférence pour le jQuery.

Donc le plus simple pour débuter.

- Revois bien comment faire transiter les données formulaires de l'HTML vers le PHP (Comment récupérer la valeur de l'input en PHP) => mettre 2 formulaires différents dans la même page HTML et récupérer dans le même fichier PHP les donnés du 1er ou du 2e formulaire

- Voir comment intégrer la Librairie jQuery dans ta page HTML.(indice <script src=""></script>)

- Voir comment faire appel au JavaScript (les balises <script></script> ou => passer par un fichier JS ce que je te recommandes plus)

- Voir comment faire appel aux données de ton formulaire via jQuery (faire appel à tes inputs + comprendre comment détecter un Évènement de type click ou envoie de formulaire)

- Comprendre ce qu'est un évènement

- Voir comment détecter et bloquer l'envoie par HTML pour le faire transiter par jQuery à l'aide de l'ajax.

Voila quelques points que je te recommanderai de creuser histoire de pouvoir avancer pas mal dans ton exercice.

Un truc qui m'a aussi pas mal aidé au début c'était de regarder le code source de sites web.

Parfois quand j'oubliais la syntaxe d'écrire d'éléments en HTML je regardais le code source de site pour voir comment l'écrire. ex: pour le CSS j'oubliais tout le temps que c'est link rel="stylesheet" type="text/css"...

Voila. N'hésite pas si tu as besoin de plus d'aide / conseilles.

Bonne journée
05/05/2022, 09h35
chaaa.info

Merci beaucoup pour tes conseils, je vais creuser tout ça !

1 pièce(s) jointe(s)

Salut à tous,
Comme le soulignait Sparky95, apprendre le JQuery vous facilitera grandement la tâche pour des applications en Javascript et Ajax.
Voici ci-dessous un modeste exemple en Jquery pour votre formulaire de recherche.

Ps : Téléchargez le fichier "dossiers-recents-durbanisme.json" du site "https://opendata.paris.fr/explore/dataset/dossiers-recents-durbanisme/export/"

Pièce jointe 618590

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<body>
    <style>
        h1 {
            color: #2364CA;
        }
 
        span {
            display: inline-block;
            font-size: 1.1em;
            position: relative;
            line-height: 30px;
        }
 
        select {
            border: 1px solid #009AFE;
            font-size: 1em;
            height: 25px;
            margin-right: 10px;
        }
 
        button {
            height: 28px;
            width: 150px;
            cursor: pointer;
            border: 1px solid #009AFE;
            color: #1787a2;
            font-weight: bold;
            border-radius: 20px;
        }
 
        button::before {
            content: "\01F50D";
        }
 
        #mytable {
            padding: 20px;
        }
 
        table {
            border-collapse: collapse
        }
 
        th {
            border: 1px solid #009AFE;
            padding: 5px;
            width: 150px;
            color: #1781f2;
        }
 
        td {
            border: 1px solid #009AFE;
            padding: 10px;
        }
    </style>
 
    <div>
        <h1>Vérification des permis de contruire à Paris</h1>
        <span>Type de dossier:</span>
        <select name="typededossier" id="select_un">
            <option value="1">Permis de construire</option>
        </select>
        <span>Arrondissement:</span>
        <select name="ardm" id="select_deux"></select>
 
        <script type="text/javascript">
            var x, option, element = document.getElementById("select_deux");
 
            for (x = 1; x < 21; x += 1) {
                option = document.createElement("option");
                option.text = option.value = x;
                element.appendChild(option);
            }
        </script>
 
        </select>
        <span>Type de décision:</span>
        <select name="tdd" id="select_trois">
            <option value="1">Favorable</option>
            <option value="2">FavorableRéservé</option>
            <option value="3">Défavorable</option>
        </select>
        <span>Etat de l'instruction:</span>
        <select name="edi" id="select_quatre">
            <option value="1">Accordé</option>
            <option value="2">En cours d'instruction</option>
            <option value="3">Refusé</option>
        </select>
        <span>Circonscription:</span>
        <select name="ccsp" id="select_cinq">
            <option value="1">NORD</option>
            <option value="2">EST</option>
            <option value="2">SUD</option>
            <option value="2">OUEST</option>
        </select>
 
        <button id="rechecher"> Rechercher</button>
    </div>
 
    <div id="mytable">
        <table>
            <tr>
                <th>Type de dossier</th>
                <th>Arrondissement</th>
                <th>Type de décision</th>
                <th>Etat de l'instruction</th>
                <th>Circonscription</th>
                <th>Record Id</th>
            </tr>
 
        </table>
    </div>
 
    <script src="js/script.js"></script>
</body>

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
function litfichier(A, B, C, D, E) {
  var x, V, Kkey, ligne = '', Vid; 
 
  $('.data').remove(); //RAZ tableau
 
  $.ajax({
    url: "./dossiers-recents-durbanisme.json",
    type: "GET",
    dataType: "json",
    error: function () {
      console.log('Error!')
    },
    success: function (data) {
      for (x = 0; x < (data.length); x += 1) {
        Kkey = Object.keys(data[x]);
 
        if (Kkey[1] === "recordid") {
          Vid = Object.values(data[x]);
        }
 
        if (Kkey[2] === "fields") {
          V = Object.values(data[x]);
 
          if (V[2]['type_decision'] === undefined) {
            V[2]['type_decision'] = '';
          } 
 
          if (V[2]['type_dossier'] === A && V[2]['commune'] === parseInt(B) && (V[2]['type_decision'] === C || V[2]['type_decision'] === '') && V[2]['etat'] === D && V[2]['circonscription'] === E) {
            ligne += `<tr class="data"><td> ${V[2]['type_dossier']}</td>` +
              `<td> ${V[2]['commune']}</td>` +
              `<td> ${V[2]['type_decision']}</td>` +
              `<td> ${V[2]['etat']}</td>` +
              `<td> ${V[2]['circonscription']}</td>` +
              `<td> ${Vid[1]} </td></tr>`;
          }
        }
      }
      $('table').append(ligne); // On affiche les résultats dans le tableau
    }
    });
}
 
$(function () {
    (function ($) {
 
      $('#rechecher').on('click', function () {
        var optionsselect = [];// Les valeurs des selects dans un array
 
        /*
        type_dossier --> Permis de construire
        type_decision -->  Favorable FavorableRéservé Défavorable
        circonscription --> NORD EST SUD OUEST
        commune --> n° de l'arrondissement
        etat --> En cours d'instruction Accordé Refusé
        */
 
        optionsselect[0] = $('#select_un option:selected').text(); //type_dossier 
        optionsselect[1] = $('#select_deux option:selected').text(); // commune
        optionsselect[2] = $('#select_trois option:selected').text(); //type_decision
        optionsselect[3] = $('#select_quatre option:selected').text(); // etat
        optionsselect[4] = $('#select_cinq option:selected').text(); // circonscription
 
        litfichier(optionsselect[0], optionsselect[1], optionsselect[2], optionsselect[3], optionsselect[4]); // En Ajax
      });
    })(jQuery);
});

05/05/2022, 17h21
chaaa.info

Merci beaucoup, j'étudie tout ça et je reviens vers vous en cas de problèmes
05/05/2022, 17h40
Dave Hiock

\ô/

Citation:

Envoyé par ASCIIDEFOND

Ps : Téléchargez le fichier "dossiers-recents-durbanisme.json"

pourquoi ne pas interroger directement l'API qui donne la garantie de données à jour ?

Citation:

Envoyé par ASCIIDEFOND

apprendre le JQuery vous facilitera grandement la tâche pour des applications en Javascript et Ajax.

apprendre jQuery sans connaître JavaScript c'est , à mon sens, prendre le problème à l'envers et se retrouver rapidement devant des incompréhension voir du code spaghetti :mrgreen:
Pour l'utilisation de l'Ajax, il existe par exemple l'API fetch, qui est plus simple d'utilisation qu'il n'y paraît.

Concernant le code

Citation:

litfichier(optionsselect[0], optionsselect[1], optionsselect[2], optionsselect[3], optionsselect[4]); // En Ajax

peu-être plus simple de passer simplement l'array

Code:

litfichier(optionsselect); // En Ajax

...
05/05/2022, 21h10
chaaa.info

Citation:

Envoyé par Dave Hiock

\ô/

pourquoi ne pas interroger directement l'API qui donne la garantie de données à jour ?

Qu'elle est la procédure pour faire cela s'il vous plait ?
05/05/2022, 21h51
chaaa.info

1 pièce(s) jointe(s)

Citation:

Envoyé par ASCIIDEFOND

Salut à tous,
Comme le soulignait Sparky95, apprendre le JQuery vous facilitera grandement la tâche pour des applications en Javascript et Ajax.
.....

Le problème c'est que je dois afficher ce formulaire sur une page WordPress, ce qu'ai j'ai fait en créant un short code qui permet de l'afficher, et traiter le formulaire avec Ajax. Tu aurais des conseils pour gérer ça dans Wordpress ?

Pièce jointe 618605
06/05/2022, 09h44
ASCIIDEFOND

Salut,

Citation:

Envoyé par chaaa.info

Le problème c'est que je dois afficher ce formulaire sur une page WordPress, ce qu'ai j'ai fait en créant un short code qui permet de l'afficher, et traiter le formulaire avec Ajax. Tu aurais des conseils pour gérer ça dans Wordpress ?

Pour intégrer du code dans Wordpress, désolé mais là je ne pourrais pas te renseigner.
Voir du côté de ces liens peut-être ?

Activer JQuery dans Wordpress
https://wpchannel.com/wordpress/tuto...-slide-toggle/

Ajouter correctement ses scripts jQuery avec WordPress
https://wordpress.bbxdesign.com/astu...avec-wordpress

WordPress et Ajax
https://capitainewp.io/formations/de...ordpress-ajax/

Re salut,

Citation:

Envoyé par chaaa.info

Qu'elle est la procédure pour faire cela s'il vous plait ?

Re salut,
Autre code pour interroger l’API, si cela peut aider ?

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
function litfichier(otpisel) {
  var x, ligne = '', Field, data, Rec=[];
 
  $('.data').remove(); //RAZ tableau
 
  $.ajax({
    url: "https://opendata.paris.fr/api/records/1.0/search/?dataset=dossiers-recents-durbanisme&q=&rows=5000&sort=-commune&facet=type_dossier&facet=commune&facet=etat&facet=type_decision&facet=circonscription&refine.type_dossier=Permis+de+construire",
    type: "GET",
    dataType: "json",
    error: function () {
      console.log('Error!')
    },
    success: function (Data) {
     data = Data['records'];
 
      for (x = 0; x < data.length; x += 1) {
        Field = data[x]['fields'];
 
        Rec[0] = Field['type_dossier'];
        Rec[1] = Field['type_decision'];
        Rec[2] = Field['libelle'];
        Rec[3] = Field['date_depot'];
        Rec[4] = Field['date_decision'];
        Rec[5] = Field['demandeur'];
        Rec[6] = Field['adresse'];
        Rec[7] = Field['etat'];
        Rec[8] = Field['circonscription'];
        Rec[9] = Field['commune'];
        Rec[10] = Field['nom_dossier'];  
 
 
        if(Rec[0] === otpisel[0] && (Rec[1] === otpisel[2] || Rec[1] === undefined) && Rec[7] === otpisel[3] &&  Rec[9] === parseInt(otpisel[1]) && Rec[8] === otpisel[4] ) {
          ligne += `<tr class="data"><td> ${Rec[0]}</td>` +
            `<td> ${Rec[9]}</td>` +
            `<td> ${Rec[1]}</td>` +
            `<td> ${Rec[7]}</td>` +
            `<td> ${Rec[8]}</td>` +
            `<td> ${Rec[10]} </td></tr>`;
        }
      }
      $('table').append(ligne); // On affiche les résultats dans le tableau
    }
  });
}
 
$(function () {
    (function ($) {
 
      $('#rechecher').on('click', function () {
        var optionsselect = [];// Les valeurs des selects dans un array       
        optionsselect[0] = $('#select_un option:selected').text(); //type_dossier 
        optionsselect[1] = $('#select_deux option:selected').text(); // commune
        optionsselect[2] = $('#select_trois option:selected').text(); //type_decision
        optionsselect[3] = $('#select_quatre option:selected').text(); // etat
        optionsselect[4] = $('#select_cinq option:selected').text(); // circonscription
 
        litfichier(optionsselect);
      });
    })(jQuery);
});

06/05/2022, 16h17
chaaa.info

Merci pour ta réponse !
15/05/2022, 12h24
chaaa.info

Bonjour, j'ai testé ton code mais rien ne se passe

Bonjour,
j'ai du mal à comprendre la démarche engagée, envoi et lecture d'une requête à l'API à chaque demande !!!

La lecture et l’initialisation devrait se faire au départ puis les filtres et affichage demandés lors des changements de valeurs sur les <select>.

La récupération est des plus simple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 // pour storer les datas let objData = {}; function getDatas(url, callback) { fetch(url) .then((response) => response.json()) .then((data) => { // store les datas pour traitement objData = [...data.records]; // init de select par exemple callback && callback( data); }); } // lancement au chargement getDatas(URL, initSelect);
initialisation des <select> peut également être dynamique, fonction callback dans le code ci-dessus, mais ce n'est pas une obligation si l'on sait vraiment à quels champs on à affaire.

Sur les changements il suffit d'utiliser la méthode filter() pour récupérer les données correspondantes, et ce sur tous les select filtrants.

Voilà pour les grandes lignes, on ne lit qu'une fois, on peut prévoir un « update » au cas où, et on fait le reste côté client.

Voir : Array.prototype.filter()

16/05/2022, 12h37
chaaa.info

Et donc ça c'est toujours dans le même script. JS ?

Bonjour, pouvez-vous me dire ce qui ne va pas dans le code s'il vous plaît ?

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
// pour storer les datas
let objData = {};
function getDatas(url, callback) {
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      // store les datas pour traitement
      objData = [...data.records];
      // init de select par exemple
      callback  && callback( data);
    });
}
// lancement au chargement
getDatas(URL, initSelect);
 
 
 
 
function litfichier(otpisel) {
  var x, ligne = '', Field, data, Rec=[];
 
  $('.data').remove(); //RAZ tableau
 
  $.ajax({
    url: "https://opendata.paris.fr/api/records/1.0/search/?dataset=dossiers-recents-durbanisme&q=&rows=5000&sort=-commune&facet=type_dossier&facet=commune&facet=etat&facet=type_decision&facet=circonscription&refine.type_dossier=Permis+de+construire",
    type: "GET",
    dataType: "json",
    error: function () {
      console.log('Error!')
    },
    success: function (Data) {
     data = Data['records'];
 
      for (x = 0; x < data.length; x += 1) {
        Field = data[x]['fields'];
 
        Rec[0] = Field['type_dossier'];
        Rec[1] = Field['type_decision'];
        Rec[2] = Field['libelle'];
        Rec[3] = Field['date_depot'];
        Rec[4] = Field['date_decision'];
        Rec[5] = Field['demandeur'];
        Rec[6] = Field['adresse'];
        Rec[7] = Field['etat'];
        Rec[8] = Field['circonscription'];
        Rec[9] = Field['commune'];
        Rec[10] = Field['nom_dossier'];  
 
 
        if(Rec[0] === otpisel[0] && (Rec[1] === otpisel[2] || Rec[1] === undefined) && Rec[7] === otpisel[3] &&  Rec[9] === parseInt(otpisel[1]) && Rec[8] === otpisel[4] ) {
          ligne += `<tr class="data"><td> ${Rec[0]}</td>` +
            `<td> ${Rec[9]}</td>` +
            `<td> ${Rec[1]}</td>` +
            `<td> ${Rec[7]}</td>` +
            `<td> ${Rec[8]}</td>` +
            `<td> ${Rec[10]} </td></tr>`;
        }
      }
      $('table').append(ligne); // On affiche les résultats dans le tableau
    }
  });
}
 
$(function () {
    (function ($) {
 
      $('#rechecher').on('click', function () {
        var optionsselect = [];// Les valeurs des selects dans un array       
        optionsselect[0] = $('#select_un option:selected').text(); //type_dossier 
        optionsselect[1] = $('#select_deux option:selected').text(); // commune
        optionsselect[2] = $('#select_trois option:selected').text(); //type_decision
        optionsselect[3] = $('#select_quatre option:selected').text(); // etat
        optionsselect[4] = $('#select_cinq option:selected').text(); // circonscription
 
        litfichier(optionsselect);
      });
    })(jQuery);
});

16/05/2022, 19h11
NoSmoking

J'ai un peu peur de ce que je lis, comprends-tu au moins ce que l'on te fournit ?

Montre nous ton code que l'on voit ta compréhension des enchainements.

Désolée c'est la première fois que j'utilise Ajax et JQuery je ne m'y connais pas du tout …
Je n'ai fait que le formulaire html et après un des membres de la discussion plus haut a un peut modifier les champs pour faire la liaison avec JavaScript (ex : select_un, select_deux ...)
Et pour le code oui j'ai essayé de comprendre un peu la logique pour pouvoir récupérer les données de l'API

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<body>
    <style>
        h1 {
            color: #2364CA;
        }
 
        span {
            display: inline-block;
            font-size: 1.1em;
            position: relative;
            line-height: 30px;
        }
 
        select {
            border: 1px solid #009AFE;
            font-size: 1em;
            height: 25px;
            margin-right: 10px;
        }
 
       
 
        
 
        #mytable {
            padding: 20px;
        }
 
        table {
            border-collapse: collapse
        }
 
        th {
            border: 1px solid #009AFE;
            padding: 5px;
            width: 150px;
            color: #1781f2;
        }
 
        td {
            border: 1px solid #009AFE;
            padding: 10px;
        }
    </style>
 
    <div>
 
        <span>Type de dossier:</span>
        <select name="typededossier" id="select_un">
            <option value="1">Permis de construire</option>
        </select>
 
        <br>
 
        <span>Arrondissement:</span>
        <select name="ardm" id="select_deux"></select>
 
        <script type="text/javascript">
            var x, option, element = document.getElementById("select_deux");
 
            for (x = 1; x < 21; x += 1) {
                option = document.createElement("option");
                option.text = option.value = x;
                element.appendChild(option);
            }
        </script>
 
        <br>
 
        </select>
        <span>Type de décision:</span>
        <select name="tdd" id="select_trois">
            <option value="1">Favorable</option>
            <option value="2">FavorableRéservé</option>
            <option value="3">Défavorable</option>
        </select>
 
        <br>
 
        <span>Etat de l'instruction:</span>
        <select name="edi" id="select_quatre">
            <option value="1">Accordé</option>
            <option value="2">En cours d'instruction</option>
            <option value="3">Refusé</option>
        </select>
 
        <br>
 
        <span>Circonscription:</span>
        <select name="ccsp" id="select_cinq">
            <option value="1">NORD</option>
            <option value="2">EST</option>
            <option value="2">SUD</option>
            <option value="2">OUEST</option>
        </select>
 
        <br>
 
        <button id="rechecher"> Rechercher</button>
 
    </div>
 
    <div id="mytable">
        <table>
            <tr>
                <th>Type de dossier</th>
                <th>Arrondissement</th>
                <th>Type de décision</th>
                <th>Etat de l'instruction</th>
                <th>Circonscription</th>
                <th>Record Id</th>
            </tr>
 
        </table>
    </div>
 
    <script src="js/script.js"></script>
</body>

Bonjour à tous,
chaaa.info, voici un exemple avec Fetch. (NoSmoking corrigera ce code éventuellement ;))
Ps : Pour JQuery, ne pas oublier d’ajouter la ligne '<script src="https://code.jquery.com/jquery-3.6.0.min.js"</script>' dans le 'head' du 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
function getDatas(url, callback) {
    let x, callbackOriginal = [], ligne, Field, Rec = [], objData = {};
 
    //On fait une copie du tableau 'callback' qui contient les valeurs des éléments 'select' dans callbackOriginal
    callbackOriginal = Object.values(callback);
 
    fetch(url)
        .then((response) => response.json())
        .then((data) => {
            objData = data.records;
 
            for (x = 0; x < objData.length; x += 1) {
 
                Field = objData[x]['fields'];
 
                Rec = [Field.type_dossier, String(Field.commune), Field.type_decision, Field.etat, Field.circonscription];
                //Rec[0] = Field.type_dossier, Rec[1] = String(Field.commune), Rec[2] = Field.type_decision, etc.. 
 
                // On vérifie et remplace dans les deux tableaux ('callback' et 'Rec') si 'Field.type_decision' renvoi 'undefined'
                if (Field.type_decision === undefined) {
                    Rec[2] = "";
                    callback[2] = "";
                } else {
                // Sinon on réinitialise la valeur par défaut via le tableau 'callbackOriginal'
                    callback[2] = callbackOriginal[2];
                }
 
                // On compare les deux tableaux et s’ils sont identiques, on ajoute une ligne dans la table
                if (JSON.stringify(callback) === JSON.stringify(Rec)) {
                    ligne = `<tr class="data">` +
                        `<td> ${Field.type_dossier}</td>` +
                        `<td> ${Field.commune}</td>` +
                        `<td> ${Rec[2]}</td>` + // = Field.type_decision
                        `<td> ${Field.etat}</td>` +
                        `<td> ${Field.circonscription}</td>` +
                        `<td> ${Field.nom_dossier}</td></tr>`;
                    $('table').append(ligne);// Affiche une nouvelle ligne qui correspond aux critères de recherche 
                }
            }
        })
        .catch(error => console.log('Erreur!'));
}
 
$(function () {
    (function ($) {
 
        //click sur le bouton en JQuery qui correspond à 'document.getElementById("rechecher").addEventListener('click', (e) => {})' en JavaScript
        $('#rechecher').on('click', function () {
            let URL = "https://opendata.paris.fr/api/records/1.0/search/?dataset=dossiers-recents-durbanisme&q=&rows=5000&sort=-commune&facet=type_dossier&facet=commune&facet=etat&facet=type_decision&facet=circonscription&refine.type_dossier=Permis+de+construire",
                optionsselect = [];
 
            $('.data').remove(); //RAZ tableau (on supprime de la table les balises '<tr class="data"></tr>')
 
            //On rempli le tableau 'optionsselect' avec les valeurs des différents éléments 'select'
            optionsselect[0] = $('#select_un option:selected').text(); //type_dossier 
            optionsselect[1] = $('#select_deux option:selected').text(); // commune
            optionsselect[2] = $('#select_trois option:selected').text(); //type_decision
            optionsselect[3] = $('#select_quatre option:selected').text(); // etat
            optionsselect[4] = $('#select_cinq option:selected').text(); // circonscription
 
            getDatas(URL, optionsselect); // Puis on appel la fonction avec ces deux paramètres
        });
    })(jQuery);
});

18/05/2022, 11h43
NoSmoking

Citation:

Envoyé par ASCIIDEFOND

(NoSmoking corrigera ce code éventuellement ;))

ma correction ne portera pas sur le code mais sur l'approche, dans ton code à chaque clic tu refais ta requête ce qui est parfaitement inutile d'autant qu'aucun paramètre ne change.
La requête, tel quelle ne pèse pas lourd, 345kB, mais cela reste inutile.

Donc on lit une fois et on filtre ensuite suivant les critères des différents <select>.

Suite

Bonjour à tous, j'espère que vous allez bien.

J'ai le devoir à rendre dans une semaine, quelqu'un du forum m'a aidé pour pouvoir afficher les résultats dans la console, j'ai compris le fonctionnement, mais il me manque la partie pour pouvoir afficher les résultats dans la page web, dans un tableau.
Pouvez-vous me donner des pistes s'il vous plait en fonction du code déjà fait, je débute en JS, je sais que je vous sollicite beaucoup … J'aimerais bien le réussir de moi même mais ça fait plusieurs jours que je suis dessus et je dois rendre le projet bientôt.

Voici le code html fait moi-même :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!-- formulaire html -->
    <form id="monForm">
        <!-- champ caché -->
        <input type='hidden' name="type_dossier" value="Permis de construire">
 
        <div class="form-group">
            <label>Adresse</label>
            <input type="text" name="adresse" placeholder="Veuillez indiquer l'adresse">
        </div>
 
         <div class="form-group">
 
        <label>Arrondissement</label>
        <select name="commune">
             <option value="" selected>Aucun</option>
        </select>
        <script type="text/javascript">
            var select = '';
for (i=1;i<=20;i++){
    select += '<option val=' + i + '>' + i + '</option>';
}
$('#commune').html(select);
        </script>
 
        </div>
 
           <div class="form-group">
            <label>Circonscription</label>
            <select name="circonscription">
                <option value="" selected>Aucune</option>
                <option value="NORD">Nord</option>
                <option value="EST">Est</option>
                <option value="SUD">Sud</option>
                <option value="OUEST">Ouest</option>
            </select>
        </div>
 
        <div class="form-group">
            <label>Type de décission</label>
            <select name="type_decision">
                <option value="" selected>Aucune</option>
                <option value="Favorable">Favorable</option>
                <option value="FavorableRéservé">FavorableRéservé</option>
                <option value="Défavorable">Défavorable</option>
            </select>
        </div>
 
        <div class="form-group">
            <label>État de l'instruction</label>
            <select name="etat">
                <option value="" selected>Aucune</option>
                <option value="Accordé">Accordé</option>
                <option value="En cours d'instruction">En cours d'instruction</option>
                <option value="Refusé">Refusé</option>
            </select>
        </div>
 
 
 
        <div class="form-group">
            <input type="submit" value="rechercher">
        </div>
    </form>
 
<!-- tableau html-->
    <div id="mytable">
        <table>
            <tr>
                <th>Type de dossier</th>
                <th>Adresse</th>
                <th>Arrondissement</th>
                <th>Circonscription</th>
                <th>Type de décision</th>
                <th>Etat de l'instruction</th>   
 
            </tr>
 
             <tr>
            <td id="typeDossier" >Permis de construire</td>
 
            <td id="adresse" ></script></td>
            <td id="arrondissement" ></td>
            <td id="circonscription" ></td>
            <td id="typeDecision" ></td>
            <td id="etat" ></td>
 
 
        </tr>
 
 
 
        </table>
    </div>

Et le code qui permet d'afficher les résultats de l'API dans la console :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!-- affichage des résultats dans la console -->
 
<script>
$(function(){
 
    // recherche le select arrondissement
    var $arrondissement = $("#monForm").find('select[name="commune"]').first();
 
    // remplir avec paris 1 -> 20
    for(let cpt = 1; cpt <= 20; cpt++){
        $arrondissement.append(new Option(`Paris ${cpt}`, cpt));
    }
 
    $("#monForm").on('submit', function(e){
        // disable default submit
        e.preventDefault();
 
        // serialiser en tableau mon formulaire
        const dataForm = $(this).serializeArray();
        console.log('mon tableau', dataForm);
 
        // crée une chaine de characteres (string)
 
        const listOfStrings = dataForm.map(element => {
            // Si pas de valeur
            if(element.value == '') return '';
            // si c'est un chiffre (number)
            if(!!Number(element.value))
                return `${element.name}=${element.value}`;
            // si ce nest pas un chiffre (Not A Number)
            else if(isNaN(element.value))
                return `search(${element.name},'${element.value}')`;
        })
 
        console.log(listOfStrings);
        const listWithoutEmpty = listOfStrings.filter(element => element != '');
 
        console.log(listWithoutEmpty);
 
        const serializfedList = listWithoutEmpty.join(' and ');
 
 
        const urlBase ='https://opendata.paris.fr/api/v2/catalog/datasets/dossiers-recents-durbanisme/records';
        const listOfColumns = ['nom_dossier', 'type_dossier', 'adresse','commune', 'type_decision', 'etat', 'circonscription','programme'].join(',');
        const url = `${urlBase}?select=${listOfColumns}&where=${serializfedList}&limit=100&offset=0&lang=fr&timezone=Europe%2FParis`;
 
 
          console.log(url);
        $.get(url, function(data, status){
            console.log(data);
 
            // generer le tableau;
 
 
 
        });
    })
});
</script>
 
 
</body>
</html>

Merci par avance pour votre aide, je commence bien sûr à me former en JS.

12/09/2022, 19h35
NoSmoking

Citation:

J'ai le devoir à rendre dans une semaine,...

sans vouloir être sévère il serait temps de se réveiller :roll:

Pour le reste, ASCIIDEFOND t'a donné une méthode posiisble dans sa réponse du 17/05/2022, 08h58 (à partir de la ligne 29) !
12/09/2022, 20h06
chaaa.info

Bonjour, pour etre précise je dois le montrer le 28 septembre lol mais comme je travaille en dehors des cours dans une entreprise alors ça me fait moins de temps.
La méthode que tu dis es possible avec le code que j'ai montré ?
15/09/2022, 10h17
NoSmoking

Citation:

La méthode que tu dis es possible avec le code que j'ai montré ?

Il te suffit de l'essayer pour l'adopter ;)