Intégration "dynamique" de Google Sheet sur une page web
Bonjour,
Je cherche à intégrer les réponses à un Google form sur une page Web.
Sur la Google sheet avec les réponses : fichier/partager/publier sur le web/intégrer et je récupère le code
Le problème c'est que le tableau qui s'affiche sur ma page Web n'indique que les réponses déjà fournies au moment où je récupère le code pour intégration.
Connaissez vous un moyen pour rendre l'intégration "dynamique" et d'afficher toutes les réponses au fur et à mesure qu'elles sont saisies ?
Bonjour,
Connaissez vous un moyen pour rendre l'intégration "dynamique" et d'afficher toutes les réponses au fur et à mesure qu'elles sont saisies ?
Il faudrait procéder à l'envers, partir d'une page web qui ira chercher les informations sur le fichier GSheets (avec un rafraichissement si tu le souhaites).
Tu peux utiliser un code de ce type
<html>
<title>Google Sheets json endpoint V4</title>
<author>Mike Steelson</author>
<style>
table {border-collapse: collapse;}
th,td {border: 1px solid black;}
</style>
<body>
<div id="json">json here</div>
<script>
var id = '1n-rjSYb63Z2jySS3-M0BQ78vu8DTPOjG-SZM4i8IxXI';
var gid = '0';
var url = 'https://docs.google.com/spreadsheets/d/' + id + '/gviz/tq?tqx=out:json&tq&gid=' + gid;
fetch(url)
.then(response => response.text())
.then(data => document.getElementById("json").innerHTML = myItems(data.slice(47, -2))
);
function myItems(jsonString) {
var json = JSON.parse(jsonString);
var table = '<table>';
var flag = jsonWithLabels(json);
if (flag) {
table += '<tr>';
json.table.cols.forEach(colonne => table += '<th>' + colonne.label + '</th>')
table += '</tr>';
}
json.table.rows.forEach((row, index) => {
table += '<tr>';
row.c.forEach(cel => {
try { var valeur = cel.f ? cel.f : cel.v }
catch (e) { var valeur = '' }
if (!flag && index == 0) { table += '<th>' + valeur + '</th>' }
else { table += '<td>' + valeur + '</td>' }
})
table += '</tr>';
})
table += '</table>';
return table
}
function jsonWithLabels(json) {
var labels = json.table.cols.map(c => c.label);
return (labels.join('') != '')
}
</script>
</body></html>Merci, je vois que je peux indiquer l'ID de ma Google sheet ... Pour le reste je suis depassée, il va me falloir un peu de temps pour comprendre.
Je ne pourrais donc pas te dire immédiatement si ça fonctionne ... Au moins je sais dans quelle direction avancer 😁, merci
indique l'id de ton fichier puis le gid de ta feuille
le soucis est qu'il te faut ensuite l'exporter sur un serveur ...
je regarderai pour une autre solution si tu n'as pas accès à un serveur (cela va me prendre quelques jours)
En effet, j'arrive à afficher ton tableau en intégrant ton code tel quel mais avec mes ID et GID je n'ai que le titre + nom de l'auteur.
Merci beaucoup pour ton aide, rien d'urgent de mon coté
Il faut que ta feuille soit un tableau je pense...
Merci pour ton aide.
Je suis tombée sur "testEndPointJSON" d'où est issu le code (pas le droit de coller le lien)
Quand je modifie la 3ème colonne avec l'ID de ma feuille, mon tableau s'affiche bien en bas ... je pense que c'est en effet un problème de serveur ?
Quoi qu'il en soit, l'association pour laquelle je fais ce projet est emballée par ce que j'ai réussi à montrer/expliquer. Je vais donc pouvoir solliciter l'équipe informatique pour terminer.
Je repasserai ici vous donner le fin mot de l'histoire, si ça peut aider d'autres personnes.
Je suis tombée sur "testEndPointJSON" d'où est issu le code (pas le droit de coller le lien)
tu dois pouvoir le mettre en utilisant les balises </> au dessus du cadre de réponse, voir en expassant google avec des espaces g o o g l e
Je repasserai ici vous donner le fin mot de l'histoire, si ça peut aider d'autres personnes.
absolument, cela m'intéresse
Hello,
Alors voici la solution retenue : ajouter un bouton pour rafraichir l'affichage
ben merci, c'est un peu le retour à l'envoyeur
Il a modifié un peu le code pour ajouter le bouton "rafraichir" , ta solution était la bonne en effet ... au moins la solution définitive est désormais accessible pour ceux qui (comme moi) ne savent pas coder. Merci encore pour ton aide.