Re Seb,
Alors après avoir bien galérer comme il faut, j'ai pu avoir un rendu qui donnait quelque chose de sympa tu as raison, mais ... je n'y suis pas complètement arrivé.
voici le resultat de mon appel à l'api :
{"Count":27,"Results":[15712,15718,15732,15737,15744,15746,15767,15792,15796,15805,15807,15819,15851,15877,15921,15943,15944,15958,15991,16137,16171,16175,16258,16280,16317,16326,16380],"Success":true,"Message":"The search was successful"}
Et voici le code que j'ai :
j'ai un formulaire qui demande un titre, un auteur, une description et un type.
Bon je n'ai pas réussi a récupérer les variable dans mon javascript, alors j'ai mis l'url de l'api en dure. Le résultat me ressort bien des lignes générées en dynamique (un bel effet ouaw )mais je n'arrive pas a afficher les valeurs de mon Results de l'API qui est un Array. Cela m'affiche tous les tickets créés a chaque ligne.
27 [ 15712, 15718, 15732, 15737, 15744, 15746, 15767, 15792, 15796, 15805, 15807, 15819, 15851, 15877, 15921, 15943, 15944, 15958, 15991, 16137, 16171, 16175, 16258, 16280, 16317, 16326, 16380 ] Editer
27 [ 15712, 15718, 15732, 15737, 15744, 15746, 15767, 15792, 15796, 15805, 15807, 15819, 15851, 15877, 15921, 15943, 15944, 15958, 15991, 16137, 16171, 16175, 16258, 16280, 16317, 16326, 16380 ]
De plus, comment ne déclencher l'appel a l'API qu'une fois le clique du bouton effectué ? J'ai essayé avec
searchForm.onsubmit = (event) => {
mais cela n'a pas fonctionné.
Encore une fois merci beaucoup beaucoup, j'apprends énormément.
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
|
<!-- login form -->
<div class="bg-white pt-4 pb-8 rounded shadow-2xl w-11/12 h-full">
<H2 class="text-2xl font-bold mb-5 text-gray-800">Rechercher un Ticket LanSweeper</H2>
<div id="recherche">
<form class="space-y-4" method="post" id="searchForm">
<div>
<label class="block mb-1 font-bold text-gray-500 ">Titre :</label>
<input type="text" class="w-3/4 border-2 border-gray-200 p-2 rounded outline-none focus:border-purple-500">
</div>
<div>
<label class="block mb-1 font-bold text-gray-500 ">Auteur :</label>
<input id="searchInput" type="text" class="w-3/4 border-2 border-gray-200 p-2 rounded outline-none focus:border-purple-500">
</div>
<div>
<label class="block mb-1 font-bold text-gray-500">Description</label>
<Textarea rows=5 type="text" class="w-3/4 border-2 border-gray-200 rounded outline-none focus:border-purple-500"></Textarea>
</div>
<div>
<label class="block mb-1 font-bold text-gray-500">Type</label>
<select w-3/4 name="type" class="border-2 border-gray-200 p-3 rounded outline-none focus:border-purple-500">
<option>Incident
<option>Demande
<option>Achat
</select>
</div>
<input class=" w-1/2 center bg-yellow-400 hover:bg-yellow-300 m-5 p-4 rounded text-yellow-900 hover:text-yellow-800 transition duration-300" type="submit" value="Rechercher">
</form>
</div>
<div class="result-container">
<ul id="result"></ul>
</div>
</div>
<script type="module">
import * as Vue from "https://unpkg.com/vue@3.0.11/dist/vue.esm-browser.js";
const app = Vue.createApp({
data() { // Déclaration des données auxquelles Vue va réagir
return {
loading: true, // Indique si un message d'attente doit être affiché
tickets: [], // Tableau allant contenir les tickets obtenus avec le fetch()
};
},
created() {
fetch('hurl de l'api').then(response => {
return response.json();
}).then(result => {
this.$data.loading = false; // Chargement terminé
this.$data.tickets = result;
});
},
});
//searchForm.onsubmit = (event) => {
app.mount("main"); // On monte Vue sur le <main> HTML
// }
</script>
<main>
<h3>Tickets</h3>
<p v-if="$data.loading === true">Chargement des tickets en cours...</p>
<p v-else-if="$data.tickets.length === 0">Pas encore de tickets !</p>
<table v-else>
<tr v-for="ticket in $data.tickets.Results">
<td>{{ tickets.Count }}</td>
<td>{{ tickets.Results }}</td>
<td><a :href="'edit-ticket.php?id=' + tickets.Count">Editer</a></td>
</tr>
</table>
</main> |
Récupérer des données d'une API et d'un formulaire d'édition de ces données.
Répondre avec citation
!
!
.
Envoyé par twixi
Balises[CODE]...[/CODE]
en fin de discussion, quand vous avez obtenu l'aide attendue.
......... et pourquoi pas, pour remercier, un 
pour celui/ceux qui vous ont dépannés.
Partager