Lire le fichier JSON à l'aide de JavaScript
JSON signifie Notation d'objet JavaScript . Il s'agit d'un moyen d'organiser les données dans un fichier de script à l'aide de texte, ce qui facilite le stockage et le partage des données.
En lisant JSON les fichiers, qu’ils soient stockés localement ou sur un serveur, sont cruciaux pour les applications Web. Dans ce didacticiel, nous aborderons trois méthodes de lecture de fichiers JSON en JavaScript, qui peuvent être très utiles pour les développeurs Web.
Table des matières
- Comment lire un fichier JSON en JavaScript ?
- Utiliser l'API fetch() pour lire le fichier JSON
- Utilisation du module Require pour lire le fichier JSON
- En important le module pour lire le fichier JSON
- Conclusion
NOTE: JavaScript prend en charge JSON en interne et ne nécessite donc pas de modules supplémentaires pour importer et afficher le JSON. Il suffit d'importer le fichier JSON et de pouvoir facilement l'utiliser directement pour effectuer des manipulations dessus.
Comment lire un fichier JSON en JavaScript ?
Trois méthodes pour lire les fichiers JSON en JavaScript sont :
Note: Le fichier JSON ci-dessous sera utilisé pour récupérer les données.
exemple.json
{ 'users':[ { 'site':'techcodeview.com', 'user': 'Shobhit' } ] } 1. Utilisation de l'API fetch() pour lire le fichier JSON
La méthode fetch() est utilisée pour lire les fichiers JSON (fichiers locaux ou téléchargés). Il utilise la même syntaxe pour les deux types de fichiers.
Syntaxe
fetch('JSONFilePath').then().then().catch(); Suivez ces étapes pour lire le fichier JSON à l'aide de la méthode API fetch :
- Créez un fichier JSON et ajoutez-y des données
- Ouvrez le fichier JavaScript
- Dans la méthode fetch passez le chemin du fichier JSON
- Utilisez la méthode .json() pour analyser les données au format JSON.
- Affichez le contenu dans la console.
Exemple de lecture d'un fichier JSON en JavaScript :
Le code ci-dessous vous aidera à comprendre l'utilisation de la méthode fetch() pour lire les fichiers JSON.
HTML Lire le titre du fichier JSON> tête> <body> <h1>techcodeview.comh1> <h3>Allez sur la console pour voir les données récupérées !! h3> <script>function fetchJSONData() { fetch('./sample.json') .then((res) => { if (!res.ok) { lancer une nouvelle erreur (`Erreur HTTP ! Statut : ${res.status} `); } return res.json(); }) .then((data) => console.log(data)) .catch((error) => console.error('Impossible de récupérer les données :', erreur)); } fetchJSONData(); script> corps> html> </pre> </code> <p dir='ltr'> <b> <strong>Sortir: </strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt='vue console des données JSON après récupération de l'API'> </p> <h2 id='using-the-require-module-to-read-json-file'> <b> <strong>2. Utilisation du module Require pour lire le fichier JSON </strong> </b> </h2> <p dir='ltr'> <span>Exiger un module </span> <span>est utilisé pour inclure des modules dans votre application. Il peut être utilisé pour inclure un fichier dans une application Web. </span> </p> <h3> <span>Syntaxe: </span> </h3> <pre>require(JSONFilePath); </pre> <p dir='ltr'> <span>Suivez ces étapes pour lire les fichiers JSON à l'aide du module requis en JavaScript. </span> </p> <ul> <li value='1'> <span>Créez le fichier JSON comme spécifié dans l'approche précédente </span> </li> <li value='2'> <span>Créez un script.js et utilisez la méthode requise du nœud pour importer le fichier JSON </span> </li> <li value='3'> <span>Imprimer les données sur la console </span> </li> </ul> <p dir='ltr'> <b> <strong>NOTE: </strong> </b> <span>Au lieu d'exécuter le programme sur le navigateur, nous l'exécuterons sur la console en utilisant Node. Assurez-vous d'avoir au moins la version 17.0 de Node. </span> </p> <h3> <b> <strong>Exemple </strong> </b> </h3> <p dir='ltr'> <span>Le code ci-dessous peut être directement collé dans un fichier de script (le nœud doit être installé) pour exécuter et récupérer les données JSON. </span> </p>Javascript <code> <pre>const sample = require('./sample.json'); console.log(sample); </pre> </code> <p dir='ltr'> <b> <strong>Sortir: </strong> </b> </p> <pre>{ users: [ { site: 'GeeksForGeeks', user: 'Shobhit' } ] } </pre> <h2 id='by-importing-the-module-to-read-json-file'> <b> <strong>3. En important le module pour lire le fichier JSON </strong> </b> </h2> <p dir='ltr'> <span>Le </span> <span>déclaration d'importation </span> <span>peut être utilisé pour importer et stocker des éléments de fichier JSON dans une variable en JavaScript. </span> </p> <h3> <span>Syntaxe: </span> </h3> <pre>import nameOfVariable from 'JSONFilePath' assert {type: 'json'}; </pre> <ul> <li value='1'> <span>Créez le fichier JSON comme décrit dans les exemples précédents. </span> </li> <li value='2'> <span>Créez un fichier script.js et importez le fichier JSON </span> </li> </ul> <h3> <b> <strong>Exemple de lecture d'un fichier JSON en JavaScript : </strong> </b> </h3> <p dir='ltr'> <span>Le code ci-dessous lit le fichier JSON en l'important à l'aide de l'instruction import. </span> </p>HTML <code> <pre> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content= 'width=device-width, initial-scale=1.0'> <title>Lire le titre du fichier JSON> tête> <body> <h1>techcodeview.comh1> <h3>Allez sur la console pour voir les données récupérées !! h3> <script type='module' src='./script.js'>script> corps> html> </pre> </code>Javascript <code> <pre>// script.js import user from './sample.json' assert { type: 'json' }; console.log(user) </pre> </code> <p dir='ltr'> <b> <strong>Sortir: </strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt='vue console des données JSON à l'aide du module d'importation'> </p> <h2 id='conclusion'> <span>Conclusion </span> </h2> <p dir='ltr'> <span>La lecture des fichiers JSON en JavaScript est une tâche très importante pour un développeur Web, car les fichiers JSON sont utilisés pour stocker les données utilisateur, les données de configuration, les données statiques et d'autres informations vitales. </span> </p> <p dir='ltr'> <span>Ce guide explique trois méthodes pour lire les fichiers JSON en JavaScript avec des exemples. En comprenant ces techniques, les développeurs peuvent s'attaquer en toute confiance aux tâches liées aux fichiers JSON, garantissant ainsi des processus de développement plus fluides et une expérience utilisateur améliorée. </span> </p> <br> <br>
</div>
<!-- Article Footer with Prominent Share Buttons -->
<div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
<div class="flex flex-col sm:flex-row items-center justify-between gap-6">
<h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
<i class="fa fa-share-alt text-tech-500"> </i>
Partager </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Lire le fichier JSON à l'aide de JavaScript&url=https://www.techcodeview.com/read-json-file-using-javascript"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-twitter text-lg"> </i>
<span class="hidden sm:inline">Twitter </span>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/read-json-file-using-javascript"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-facebook text-lg"> </i>
<span class="hidden sm:inline">Facebook </span>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/read-json-file-using-javascript&title=Lire le fichier JSON à l'aide de JavaScript"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-linkedin text-lg"> </i>
<span class="hidden sm:inline">LinkedIn </span>
</a>
</div>
</div>
</div>
</article>
<!-- Comments Placeholder / Random Articles -->
<div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
Vous Pourriez Aimer </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/what-is-runtime-error" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/computer/09/what-is-runtime-error.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Qu'est-ce qu'une erreur d'exécution ?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/what-is-runtime-error">Qu'est-ce qu'une erreur d'exécution ? </a>
</h4>
</div> <div class="group">
<a href="/early-action-deadlines-131728" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/blog/96/early-action-deadlines.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Délais d’action précoce pour chaque collège doté d’EA" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/early-action-deadlines-131728">Délais d’action précoce pour chaque collège doté d’EA </a>
</h4>
</div>
</div>
</div>
</div>
<!-- SECONDARY COLUMN (SIDEBAR) -->
<!-- Aside Column -->
<div class="lg:col-span-4 space-y-8">
<!-- Best Articles Widget -->
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
<span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
Top Articles </h2>
</div>
<!-- Owl Carousel Preserved Container -->
<div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
<!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/java-ternary-operator-with-examples">
<img src="https://techcodeview.com/img/java-operators/07/java-ternary-operator-with-examples.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Opérateur ternaire Java avec exemples" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/java-ternary-operator-with-examples" class="hover:text-tech-500 transition-colors line-clamp-3">Opérateur ternaire Java avec exemples </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ip-address-format-table">
<img src="https://techcodeview.com/img/computer-network/59/ip-address-format-table.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Format et tableau de l'adresse IP" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ip-address-format-table" class="hover:text-tech-500 transition-colors line-clamp-3">Format et tableau de l'adresse IP </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/differences-between-tcp">
<img src="https://techcodeview.com/img/it-problems-solutions/26/differences-between-tcp.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Différences entre TCP et UDP" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/differences-between-tcp" class="hover:text-tech-500 transition-colors line-clamp-3">Différences entre TCP et UDP </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/list-indoor-games">
<img src="https://techcodeview.com/img/list/49/list-indoor-games.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Liste des jeux d'intérieur" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/list-indoor-games" class="hover:text-tech-500 transition-colors line-clamp-3">Liste des jeux d'intérieur </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/heap-sort-algorithm">
<img src="https://techcodeview.com/img/ds-tutorial/50/heap-sort-algorithm.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Algorithme de tri en tas" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/heap-sort-algorithm" class="hover:text-tech-500 transition-colors line-clamp-3">Algorithme de tri en tas </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/html-image">
<img src="https://techcodeview.com/img/html-tutorial/39/html-image.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Image HTML" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/html-image" class="hover:text-tech-500 transition-colors line-clamp-3">Image HTML </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sql-functions-aggregate-and-scalar-functions">
<img src="https://techcodeview.com/img/sql/83/sql-functions-aggregate-and-scalar-functions.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Fonctions SQL (fonctions d'agrégation et scalaires)" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sql-functions-aggregate-and-scalar-functions" class="hover:text-tech-500 transition-colors line-clamp-3">Fonctions SQL (fonctions d'agrégation et scalaires) </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sql-create-table">
<img src="https://techcodeview.com/img/sql-clauses-operators/59/sql-create-table.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="SQL CRÉER UNE TABLE" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sql-create-table" class="hover:text-tech-500 transition-colors line-clamp-3">SQL CRÉER UNE TABLE </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/what-makes-computer-fast">
<img src="https://techcodeview.com/img/computer/70/what-makes-computer-fast.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Qu’est-ce qui rend un ordinateur rapide et puissant ?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/what-makes-computer-fast" class="hover:text-tech-500 transition-colors line-clamp-3">Qu’est-ce qui rend un ordinateur rapide et puissant ? </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/how-saywhere-is-bathroom-131330">
<img src="https://techcodeview.com/img/blog/64/how-saywhere-is-bathroom.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comment dire « Où est la salle de bain ? » en espagnol" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/how-saywhere-is-bathroom-131330" class="hover:text-tech-500 transition-colors line-clamp-3">Comment dire « Où est la salle de bain ? » en espagnol </a>
</h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
<!-- Categories -->
<div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Catégorie </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Blog
</a> <a href="/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Conversion Java
</a> <a href="/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Mathématiques
</a> <a href="/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Collections Java
</a> <a href="/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Différences
</a> <a href="/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Chaîne Java
</a>
</div>
<!-- Interesting Articles Widget -->
<div class="mt-8">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Des Articles Intéressants </h2>
</div>
<div id="owl-carousel-4" class="owl-carousel owl-theme">
<!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/computer/84/what-is-an-atx-style-connector.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Qu'est-ce qu'un connecteur de type ATX ?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/computer/">Ordinateur </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/what-is-an-atx-style-connector">Qu'est-ce qu'un connecteur de type ATX ? </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/english-grammar/77/direct-indirect-speech-examples-with-answers.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Exemples de discours direct et indirect avec réponses" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/english-grammar/">Grammaire Anglaise </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/direct-indirect-speech-examples-with-answers">Exemples de discours direct et indirect avec réponses </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/dog-names-by-breed/52/miniature-schnauzer-dog-names.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Noms de chiens Schnauzer nain" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/dog-names-by-breed/">Noms de chiens par race </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/miniature-schnauzer-dog-names">Noms de chiens Schnauzer nain </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/html-tutorial/53/how-wrap-text-html.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comment envelopper du texte en HTML" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/html-tutorial/">Tutoriel Html </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/how-wrap-text-html">Comment envelopper du texte en HTML </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/html-tutorial/06/marquee-html.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Marquee HTML" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/html-tutorial/">Tutoriel Html </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/marquee-html">Marquee HTML </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/picked/36/sql-query-insert-multiple-rows.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Requête SQL pour insérer plusieurs lignes" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/picked/">Choisi </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sql-query-insert-multiple-rows">Requête SQL pour insérer plusieurs lignes </a> </h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
</div>
</div>
</div>
<!-- /Aside Column --> </div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<span class="footer-links">
Copyright ©2026 Tous Les Droits Sont Réservés |
<a href="//www.techcodeview.com/hr/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Clause De Non-Responsabilité </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">A Propos De Nous </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politique De Confidentialité </a>
</span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover { background-color: #0284c7; }
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>