Bonjour,
Pour
// Récupération des fruits depuis le fichier JSON
fetch("fruits.json")
.then(Response => Response.json())
.then(fruits => {
console.log(fruits);
// traitements des données ici !
});
Tu récupère tout, mais tu ne veut qu'un enregistrement à la fois.
il te faut donc un moyen d'extraire les infos d'un seul des enregistrements et il est facile d'imaginer que par défaut, c'est le premier.
Ce sera donc
fruits[0].
Il n'est pas nécessaire pour le moment de faire une boucle sur tes enregistrements, il te suffit d'en choisir un seul et d'extraire les champs qu'il contient:
[
{ /* enregistrement 0 */
"titre": "Cerise",
"description": "La cerise est le fruit comestible du cerisier, il s'agit d'un fruit charnu à noyau de forme sphérique, généralement de couleur rouge."
},
{ /* enregistrement 1 */
"titre": "Fraise",
"description": "La fraise est un petit fruit rouge issu des fraisiers, espèces de plantes herbacées appartenant au genre Fragaria"
},
{ /* enregistrement 2 */
"titre": "Framboise",
"description": "La framboise est un fruit rouge issu du framboisier, un arbrisseau de la famille des rosacées.."
},
{ /* enregistrement 3 */
"titre": "Mûre",
"description": "La mûre est un fruit comestible de la ronce commune, buisson épineux très envahissant du genre Rubus, de la famille des Rosacées, comme le framboisier"
}
]
note : ne pas mettre de commentaire invalide
/* enregistrement X */ dans ton fichier json, ils sont juste là pour numéroter les enregistrement.
Cela un représente un tableau et tu peut voir chaque enregistrement dans une ligne, la première ligne est la ligne numéro zéro.
Le premier (0) correspond a
cerise, c'est
fruits[0]
Dans chaque ligne de ton tableau tu as deux champs (deux autre lignes ou case) :
titre accessible via
fruits[0]['titre']
description accessible via
fruits[0]['description']
Tu peut donc déjà remplir ta première page par défaut:
// Récupération des fruits depuis le fichier JSON
fetch("fruits.json")
.then(Response => Response.json())
.then(fruits => {
console.log(fruits);
// traitements des données ici !
document.querySelector('.titre').textContent = fruits[0]['titre'];
document.querySelector('.description').innerHTML = fruits[0]['description'];
});
en raccourcie:
textContent sert à injecter du texte pure.
innerHTML sert à injecter du texte balisé.
Ce premier morceau de page peut-être :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<title>Fruits rouges</title>
</head>
<body>
<header><h1>Les fruits rouges</h1></header>
<main>
<section>
<h2 class="titre"></h2>
<div class="description"></div>
</section>
</main>
<footer><p>Hmm des fruits rouges</p></footer>
</body>
<script>// Récupération des fruits depuis le fichier JSON
fetch("fruits.json")
.then(Response => Response.json())
.then(fruits => {
console.log(fruits);
// traitements des données ici !
document.querySelector('.titre').textContent = fruits[0]['titre'];
document.querySelector('.description').innerHTML = fruits[0]['description'];
});
</script>
</html>
ou si tu préfere externalisé le traitement avec une fonction
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<title>Fruits rouges</title>
</head>
<body>
<header><h1>Les fruits rouges</h1></header>
<main>
<section>
<h2 class="titre"></h2>
<div class="description"></div>
</section>
</main>
<footer><p>Hmm des fruits rouges</p></footer>
</body>
<script>// Récupération des fruits depuis le fichier JSON
fetch("fruits.json")
.then(Response => Response.json())
.then(fruits => {
console.log(fruits);
// traitements des données ici !
printDatas(fruits[0]['titre'],fruits[0]['description'])
});
function printDatas(titre,description) {
document.querySelector('.titre').textContent = titre;
document.querySelector('.description').innerHTML = description;
}
</script>
</html>
et si tu veut construire d'autres pages, il suffit de copier/coller celle-ci en modifiant le numéro d'enregistrement pour chacune d'elle
A ce stade, tu dois avoir compris où et comment traiter tes données.
Ensuite il va te falloir une stratégie pour cibler l'une ou l'autre des lignes de ton tableau.
Pour cela , tu te sert de l'URL de ta page en lui passant en paramètre le nom du fruit voulu.
(on continu avec des fonctions pour mieux voir les étapes et les modifier par la suite)
il faut alors boucler sur tes lignes, extraire le titre et en faire un paramètre à passer dans L’URL.
On peut facilement créer le HTML à injecter à l'aide de
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Template_literals
Ce qui donne:
function getUrls(fruits) {
let navItems ='';
for (var i = 0; i < fruits.length; i++) {
lefruit = fruits[i]["titre"];
navItems += `<li><a href="?fruit=${lefruit}">${lefruit}</a></li>`;
}
return navItems; // ici on récupère la liste de liens fabriqués
}
Ils reste à faire la fonction pour injecter ça dans ton ul
function printNav(nav,items) {
document.querySelector(nav).innerHTML=items;
}
Ce qui donne maintenant ta page avec ton menu
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<title>Fruits rouges</title>
</head>
<body>
<header><h1>Les fruits rouges</h1></header>
<main>
<ul id="resultats"></ul>
<section>
<h2 class="titre"></h2>
<div class="description"></div>
</section>
</main>
<footer><p>Hmm des fruits rouges</p></footer>
</body>
<script>// Récupération des fruits depuis le fichier JSON
fetch("fruits.json")
.then(Response => Response.json())
.then(fruits => {
console.log(fruits);
// traitements des données ici !
printDatas(fruits[0]['titre'],fruits[0]['description']);
const items =getUrls(fruits);
printNav('#resultats',items);
});
// fonctions de traitements
function printDatas(titre,description) {
document.querySelector('.titre').textContent = titre;
document.querySelector('.description').innerHTML = description;
}
function getUrls(fruits) {
let navItems ='';
for (var i = 0; i < fruits.length; i++) {
lefruit = fruits[i]["titre"];
navItems += `<li><a href="?fruit=${lefruit}">${lefruit}</a></li>`;
}
return navItems;
}
function printNav(nav,items) {
document.querySelector(nav).innerHTML=items;
}
</script>
</html>
NOTE le passage de la liste fabriquée en
constante dans la fonction d'affichage des liens ainsi que le selecteur '#resultats' ciblant ton ul.
const items =getUrls(fruits);
printNav('#resultats',items);
Maintenant que tu affiches ta page par défaut avec le menu, il faut pouvoir afficher les autres.
Nous avons maintenant pour chaque fruits une URL avec le paramètre
?fruit=fruitDemande
Nous allons donc tenter de récupérer cette variable et renvoyer ce que l'on trouve:
function getQuelFruit() {
let params = new URLSearchParams(document.location.search);
let quelFruit = params.get("fruit");
return quelFruit;
}
voir
https://developer.mozilla.org/fr/docs/Web/API/URLSearchParams et
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/get
Si il n'y a pas de paramètre la valeur retournée est null ou que si celle-ci ne correspondra à rien dans le tableau , ils nous faut au préalable définir une ligne par défaut, la
0.
Ajoutons notre variable de ligne par défaut que l'on pourra mettra à jour plus loin.
// fruit par défaut
let lefruit= fruits[0];
Pour trouver le fruit choisi, nous allons faire une boucle sur tous les titres des lignes du tableau
fruits en comparant le titre des lignes (
fruit[x]['titre']) avec le paramètre trouvé dans l'URL
quelFruit et éventuellement mettre à jour
lefruit qui correspondra à
fruits[n°deLigneTrouvée]['titre'] ou lui laissé sa valeur par défaut
fruits[0]['titre']
function leFruitChoisi(fruits, quelFruit, lefruit) {
for (let f =0; f< fruits.length;f++) {
if(fruits[f]['titre']==quelFruit ) {
lefruit = fruits[f];// on a trouvé une demande
break;
}
}
return lefruit;
}
il reste à mettre à jour l'appel de la fonction
printDatas(lefruit['titre'],lefruit['description']);
de façon à prendre la ligne
lefruit mise à jour.
Cela te donne en final quelque chose comme :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<title>Fruits rouges</title>
</head>
<body>
<header><h1>Les fruits rouges</h1></header>
<main>
<ul id="resultats"></ul>
<section>
<h2 class="titre"></h2>
<div class="description"></div>
</section>
</main>
<footer><p>Hmm des fruits rouges</p></footer>
</body>
<script>// Récupération des fruits depuis le fichier JSON
fetch("fruits.json")
.then(Response => Response.json())
.then(fruits => {
// fruit par défaut
let lefruit= fruits[0];
// traitement URL si demande
const quelFruit = getQuelFruit();
// maj du fruit demandé si il y a
lefruit = leFruitChoisi(fruits, quelFruit, lefruit);
// Affichage des données 'lefruit' ici !
printDatas(lefruit['titre'],lefruit['description']);
// fabrications des liens
const items =getUrls(fruits);
// affichage des liens
printNav('#resultats',items);
});
// fonctions de traitements
function printDatas(titre,description) {
document.querySelector('.titre').textContent = titre;
document.querySelector('.description').innerHTML = description;
}
function getUrls(fruits) {
let navItems ='';
for (var i = 0; i < fruits.length; i++) {
lefruit = fruits[i]["titre"];
navItems += `<li><a href="?fruit=${lefruit}">${lefruit}</a></li>`;
}
return navItems;
}
function printNav(nav,items) {
document.querySelector(nav).innerHTML=items;
}
function getQuelFruit() {
let params = new URLSearchParams(document.location.search);
let quelFruit = params.get("fruit");
return quelFruit;
}
function leFruitChoisi(fruits, quelFruit, lefruit) {
for (let f =0; f< fruits.length;f++) {
if(fruits[f]['titre']==quelFruit ) {
lefruit = fruits[f];// on a trouvé une demande
break;
}
}
return lefruit;
}
</script>
</html>
Bon j’espère que c'est plus clair en hachant le complexe en petit morceau moins complexe et que cela t'aide à t-y retrouver un peu mieux , même si c'est long et que cela reste un exemple.
Une fois le fonctionnement eclaircie, tu peut broder et comparer avec les autres exemples et creuser via ton moteur de recherche préférer
Cdt
Modifié par gcyrillus (04 Aug 2024 - 14:48)
J'y ai ajouté des attributs role, mais je ne suis pas certains qu'il soient tous utiles car pas de display:none ni de js impliqués, les balises dt et dd sont dans le flux et dans leur usage habituel. @quentinC saura dire et taper sur les doigts du mauvais élève 
mais ça fonctionne.