Utiliser une feuille Excel comme source de données JSON pour votre site web

ParDéveloppeur logiciel
Publié le 4 min de lecture
Un ordinateur portable, une tablette et un téléphone affichant les données d'un site générées en JSON à partir d'un tableur

Un tableur constitue une source de contenu simple pour un site web : vos collègues modifient les lignes dans Excel, vous convertissez le fichier avec Excel en JSON, et votre site lit le JSON. Cela fonctionne bien pour les listes de produits, les annuaires d'équipe, les FAQ, les programmes d'événements et les grilles tarifaires qui changent quelques fois par mois.

Ce guide présente la méthode, une organisation de feuille qui se convertit proprement et le code pour afficher les données.

Sur cette page
  1. Quand un tableur a-t-il du sens comme source de données ?
  2. Concevez la feuille pour un JSON propre
  3. La méthode, étape par étape
  4. Afficher les données sur votre site
  5. Pièges courants
  6. Empêchez les rédacteurs d'abîmer les données
  7. Tableur comme source de données : FAQ

À retenir

  • Le tableur est un outil d'édition familier pour des personnes qui ne toucheraient jamais à un CMS ou à du code.
  • Concevez la feuille comme une table de base de données : une ligne d'en-tête, un enregistrement par ligne, aucune cellule fusionnée.
  • Convertissez en JSON quand le contenu change et versionnez le fichier avec votre site.
  • Pour un contenu qui change toutes les heures ou qui nécessite des droits d'accès, utilisez plutôt un vrai CMS ou une base de données.

Quand un tableur a-t-il du sens comme source de données ?

Un tableur convient à un contenu structuré, modifié par une petite équipe et mis à jour de temps en temps. Il convient mal à un contenu modifié par beaucoup de personnes en même temps, à des données qui nécessitent des droits utilisateur, ou à tout ce qui change toutes les quelques minutes.

Bons et mauvais usages
Bon usageMauvais usage
Listes de produits ou menusNiveaux de stock en temps réel
Annuaires d'équipe et du personnelComptes utilisateurs
FAQ et glossairesFils de commentaires
Programmes d'événementsSystèmes de réservation
Grilles tarifairesCommandes et paiements

Concevez la feuille pour un JSON propre

  • La ligne 1 contient les noms des champs, sous une forme adaptée au code : title, slug, price, image_url.
  • Chaque ligne est un élément. N'utilisez jamais de lignes vides comme séparateurs.
  • Pas de cellules fusionnées, de couleurs porteuses de données ni de commentaires qui ont un sens.
  • Les identifiants et les slugs sont au format Texte pour être exportés en chaînes.
  • Une feuille par type de contenu, par exemple Products et Categories.

Quand le classeur en contient plusieurs, chaque feuille devient sa propre clé dans le JSON. Les détails se trouvent dans comment plusieurs feuilles, des dates et des formules sont exportées.

La méthode, étape par étape

  1. 1

    Les rédacteurs mettent à jour le classeur dans Excel ou sur un espace partagé.

  2. 2

    Convertissez-le avec l'outil Excel en JSON et téléchargez le fichier .json.

  3. 3

    Remplacez le fichier de données de votre site, par exemple data/products.json, et relisez la modification.

  4. 4

    Publiez. Votre site lit le nouveau fichier au prochain build ou au prochain chargement de page.

Afficher les données sur votre site

JavaScript : afficher une liste de produits
const products = await fetch("/data/products.json").then((r) => r.json());

document.querySelector("#products").innerHTML = products
  .map((p) => `<li>${p.title}: ${p.price.toFixed(2)} EUR</li>`)
  .join("");

Les générateurs de sites statiques comme Astro, Eleventy, Hugo et Next.js peuvent importer des fichiers JSON au moment du build : les données finissent en HTML simple, lisible par les moteurs de recherche.

Pièges courants

  • Une colonne renommée casse le site. Convenez que les noms d'en-tête sont figés, ou vérifiez dans le code les champs manquants.
  • Les nombres mis en forme. Des prix saisis sous la forme "24,90 €" sont exportés en texte ; gardez la devise dans sa propre colonne.
  • Les dates. Stockez-les en texte au format aaaa-mm-jj pour éviter les décalages de fuseau horaire.
  • Le HTML non échappé. Échappez le texte du tableur avant de l'insérer dans une page, car les rédacteurs peuvent taper n'importe quoi dans une cellule.

Empêchez les rédacteurs d'abîmer les données

Un peu de structure dans le classeur évite la plupart des problèmes avant qu'ils n'atteignent votre site. Utilisez la Validation des données d'Excel pour limiter une colonne à une liste de catégories ou aux seuls nombres, verrouillez la ligne d'en-tête pour que personne ne renomme un champ, et ajoutez une courte feuille Instructions qui explique chaque colonne. Si vous utilisez cette feuille Instructions, supprimez-la ou ignorez sa clé dans le code, car chaque feuille apparaît dans le JSON obtenu.

Tableur comme source de données : FAQ

Puis-je utiliser Excel comme base de données pour un site web ?

Pour un petit contenu mis à jour de temps en temps, oui : convertissez la feuille en JSON et faites-la lire par le site. Pour des mises à jour fréquentes ou de nombreux rédacteurs, utilisez une vraie base de données ou un CMS.

Comment convertir le tableur en JSON ?

Utilisez un convertisseur Excel en JSON. Chaque ligne devient un objet et la ligne d'en-tête fournit les clés.

Chaque feuille devient-elle un fichier distinct ?

Non. Un classeur à plusieurs feuilles devient un seul objet JSON, avec une clé par feuille.

Est-ce compatible avec le SEO ?

Oui, si votre site transforme les données en HTML au moment du build ou côté serveur, pour que le contenu figure dans le code source de la page.

Google Sheets fonctionne-t-il aussi ?

Oui. Téléchargez la feuille au format .xlsx ou .ods et convertissez-la de la même façon.

Un CMS que votre équipe connaît déjà

Pour un contenu structuré qui change de temps en temps, un tableur associé à une conversion JSON est difficile à battre : les rédacteurs restent dans Excel, et votre site reçoit des données propres et typées.

À lire ensuite