11515 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'avais déjà créé un fichier Json, mais pas avec plusieurs paragraphes et je découvre qu'il me mets plusieurs erreurs upload/1721484380-67715-capturedncran2024-07-20160540.png
J'aimerais que l'on m'explique comment faire avec plusieurs phrases peut on se servir des balise html ou les caractères comme \n \r

Merci, de votre aide qui sera la bien venue.
Modifié par gcyrillus (06 Sep 2024 - 17:03)
Modérateur
Salut,

Parce que tu dois indiquer les \n\r\t et que ça reste sur une seule ligne.


<?php
// Remote file url
$data = [
	[
		"texte" => '
			bla bla bla
			
			bla bla bla
		'	
	]	
];

print_r(json_encode($data));


Résultat json valide :

[{"texte":"\r\n\t\t\tbla bla bla\r\n\t\t\t\r\n\t\t\tbla bla bla\r\n\t\t"}]
Bonsoir,

Ne fournis pas ton code ou tes messages d'erreur sous forme d'images.
Les utilisateurs de lecteur d'écran comme moi ne peuvent pas les lire (sauf à demander à une IA), et plus généralement, celui qui pourrait t'aider ne peut pas les copier, ce qui ne va pas inciter à t'aider.
Poste donc du texte ou du code pour une réponse plus précise.

De façon générale, tu peux écrire tout ce que tu veux dans des chaînes de caractères au format JSON, si tu connais les règles de base:

* IL faut obligatoirement échapper " et \ en \" et \\
* Sauf erreur tu n'es pas strictement obligé d'après le standard, mais c'est quand même conseillé d'utiliser \r \n \t \b \f pour être sûr que tous les parseurs acceptent (notamment les navigateurs)
* Les commentaires sont fortement déconseillés car pas officiellement supportés, et peu de parseurs les supportent effectivement
* Les caractères de certaines plages doivent être obligatoirement écrits sous leur form \uXXXX, p.ex. U+0000 à U+001F (rare en-dehors de \r\n\t\b\f) (Je ne comprends pas pourquoi le standard l'impose, à part pour éviter un NUL littéral)
* Il est conseillé d'écrire les émojis sous leur forme UTF-16 échappée \uDXXX\uDXXX, pour les parseurs qui ont du mal avec UTF-8. Par contre d'après mes observations, en général pour les caractères accentués ça marche sans que ce soit nécessaire, i.e. pas besoin d'écrire "é" en "\u00e9".

Avec toutes ces règles, JSON n'est pas hyper pratique à écrire à la main.
Il y a des formats plus pratiques pour ça, comme TOML ou YAML.
Heu, c'est un peu trop complexe a comprendre...comme les exemples valent mieux que les longs discours, concrètement pour une présentation comme celle-ci faite en html :
<h2>La cerise :</h2>
<p>La cerise est le fruit comestible du cerisier.</p>
<p>Il s'agit d'un fruit charnu à noyau de forme sphérique, généralement de couleur rouge.</p>

Comment se présenterait le même code en json :
{
        "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."      
}

Merci.
Modifié par ricem (21 Jul 2024 - 09:43)
Modérateur
Et bin, c'est encore plus simple. Tu mets tout sur une seule ligne et tu ajoutes les éléments html adéquates


{
    "titre": "Cerise",
    "description": "<p>La cerise est le fruit comestible du cerisier.</p><p>Il s'agit d'un fruit charnu à noyau de forme sphérique, généralement de couleur rouge.</p>"
}
Meilleure solution
niuxe a écrit :
Et bin, c'est encore plus simple. Tu mets tout sur une seule ligne et tu ajoutes les éléments html adéquates

{
    "titre": "Cerise",
    "description": "&lt;p&gt;La cerise est le fruit comestible du cerisier.&lt;/p&gt;&lt;p&gt;Il s'agit d'un fruit charnu à noyau de forme sphérique, généralement de couleur rouge.&lt;/p&gt;"
}


Bonjour, j'ai dû marquer résolu un peu trop vite, car là j'ai plusieurs phrases à mettre et quand je teste le code, dans le navigateur il me retranscrit le code complet
Description : <p>La cerise est le fruit comestible du cerisier.</p><p>Il s'agit d'un fruit charnu à noyau de forme sphérique, généralement de couleur rouge.</p>

Doit il être utilisé avec une fonction quelconque ?
Modérateur
ricem a écrit :


Bonjour, j'ai dû marquer résolu un peu trop vite, car là j'ai plusieurs phrases à mettre et quand je teste le code, dans le navigateur il me retranscrit le code complet
Description : &lt;p&gt;La cerise est le fruit comestible du cerisier.&lt;/p&gt;&lt;p&gt;Il s'agit d'un fruit charnu à noyau de forme sphérique, généralement de couleur rouge.&lt;/p&gt;

Doit il être utilisé avec une fonction quelconque ?


A quoi ressemble ton fichier json, et comment le lit tu ?
Modérateur
Si tu as des difficultés à créer ton fichier json, tu peut toujours te faire un petit script pour t'aider : exemple https://codepen.io/gc-nomade/pen/vYqvNEr
, il te suffit ensuite de copier coller les données dans ton fichier JSON en respectant la syntaxe dans les accolades en séparant chaque champ avec une virgule.

a peaufiner selon les besoins
Pour le moment, il ressemble a pas grand chose, je doit y mettre plusieurs paragraphe et notamment des mots en "strong" ou voire "em" ou encore "h*" comment je doit procéder ?

il est lu avec la méthode "fetch" dois-je utilisé un autre langage ?
Modérateur
fetch n'a rien à voir ici, c'est ce que tu récupère qui importe et comment tu le traite.

A priori tu récupére quelque chose qui ne provoque pas d'erreurs. A priori tu traite mal ces données.

Ils nous faut plus pour voir ce que tu fait et voir les erreurs éventuelles. Tu indique que ton code affiche description : et la suite ... Il est étonnant de voir ces deux point qui dans ton JSON lit la clé et sa valeur , donc il y a un defaut de traitement ou un defaut dans les données JSON . A part avec une boule de cristal , impossible de voir ce qui cloche depuis le peu d'infos que tu donnes Smiley smile

edit, je n'ai pas de boule de cristal comme tu t'en doute Smiley cligne
Modifié par gcyrillus (05 Sep 2024 - 22:25)
Bon pour exemple, le code html :
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="fruits.css">
    <script src="fruits.js" defer></script>
    <title>Fruits rouges</title>
</head>
<body>
    <main>
        <section class="liste">
            <p>Votre fruit préféré :</p>
            <ul>
                <li data-value="1">Cerise</li>
                <li data-value="2">Fraise</li>
                <li data-value="3">Framboise</li>
                <li data-value="4">Mûre</li>
            </ul>
        </section>
        <section class="contenu">
            <h2 class="titre">Titre :</h2>
            <p><b><u>Description :</u></b> <span class="description"></span></p>
        </section>
    </main>
</body>
</html>

le code javaScript :
fetch("fruits.json")
  .then(response => response.json())
  .then(data => {
    // Initialiser le titre et la description avec les données du premier fruit
    const titreElement = document.querySelector(".titre");
    const descriptionElement = document.querySelector(".description");

    titreElement.innerText = data[0]["titre"];
    descriptionElement.innerText = data[0]["description"];

    // Sélectionner tous les éléments li
    const selection = document.querySelectorAll('li');

    // Ajouter un événement click à chaque élément li
    selection.forEach((element) => {
      element.addEventListener("click", (event) => {
        event.preventDefault(); // Empêcher le comportement du lien par défaut

        const result = event.target.getAttribute('data-value');
        const fruitData = data[result];
        console.log(result);
        

        titreElement.innerText = fruitData["titre"];
        descriptionElement.innerText = fruitData["description"];
      });
    });
  })
  .catch((erreur) => console.error('Erreur :', erreur));


et le Json :
[
    {
        "titre": "Les fruits rouges",
        "description": "Veuillez sélectionner l'un des fruits dans le panneaux de gauche."
    },
    {
        "titre": "Cerise",
        "description": "<p>La cerise est le fruit comestible du cerisier, et il s'agit d'un fruit charnu à noyau de forme sphérique, généralement de couleur rouge.</p> <p>Ce petit fruit compte environ 50 calories pour 100 grammes.</p> <p>La fleur est généralement blanche.</p>" 
    },

    {
        "titre": "Fraise",
        "description": "<p>La fraise est un petit fruit rouge issu des fraisiers.</p> <p>Espèces de plantes herbacées appartenant au genre Fragaria.</p>"
    },
    {
        "titre": "Framboise",
        "description": "<p>La framboise est un fruit rouge issu du framboisier.</p> <p>Un arbrisseau de la famille des rosacées.</p>"
    },
    {
        "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"
    }
]

Et voila, ce que je voudrais, c'est qu'il m’interprète les balises html et qu'il ne me les retranscrit pas. Merci.
OMG, je viens de comprendre, quel abrutit je suis Smiley biggol

suffit de remplacer le "innertext" par" innerhtml" Smiley mur

Edit : J'avais lu que pour une question de sécurité, il fallait plutôt utiliser le "innerTex"t que le "innerHTML".
Sauf que le "innerHTML" prend les balise html en charge, mais pas le innerText, voilà pourquoi il affichait les balises au lieu de les prendre en compte Smiley hum
Modifié par ricem (06 Sep 2024 - 09:26)
gcyrillus a écrit :
Si tu as des difficultés à créer ton fichier json, tu peut toujours te faire un petit script pour t'aider : exemple https://codepen.io/gc-nomade/pen/vYqvNEr

J'ai vu que tu as modifié ton générateur, cependant, il ajoute des
\n
.
Mais comme les sauts de ligne des balises <p> son pris en charge par "innerHTML", du coup le
\n
ne sert pas à grand chose ?
Modérateur
ricem a écrit :

J'ai vu que tu as modifié ton générateur, cependant, il ajoute des
\n
.
Mais comme les sauts de ligne des balises &lt;p&gt; son pris en charge par "innerHTML", du coup le
\n
ne sert pas à grand chose ?


ah zut, ils ne sont pas échappés!

maj de l'outil pour qu'il soit fonctionnel https://codepen.io/gc-nomade/pen/vYqvNEr

Soit tu gardes les \\n ou injecte le saut de ligne ( lignes à commenter/décommenter)

ricem a écrit :

J'ai vu que tu as modifié ton générateur ...

oui, je joue avec Smiley decu
Modifié par gcyrillus (06 Sep 2024 - 17:02)
gcyrillus a écrit :

oui, je joue avec Smiley decu


Du coup il met des saut de ligne maintenant au lieu de les mettre en ligne Smiley ohwell ....les joies du codages ^^

Mais franchement bravo pour ce générateur, top et surtout utile !!!
Modifié par ricem (06 Sep 2024 - 17:14)