Bonsoir,

Alors pour vous expliquer un peu mieux le problème, je cherche à parcourir un fichier JSON et afficher son contenu sous forme de liste avec React. Cependant je n'arrive pas à l'afficher de manière alphabétique.

Voilà ma partie Javascript:

import data from "books.json";

class Books extends React.Component {

  render() {
    return (
	<ul id="livres">
            {
                data.entries.map((ent, titre) => {
	            return (
			<li key={ent.titre}>
			    <h3>{ent.titre}</h3>
			</li>
		    );
		})
	    }
        </ul>
    );
  }
}

Et un bout de mon JSON:

{
  "total": 50,
  "entries": [
    {
      "titre": "Le petit chaperon rouge",
      "description": "Conte pour enfant écrit par les frères Grimm",
      "annee": 1697
    },
    {
      "titre": "Le meilleur des mondes",
      "description": "Livre dystopique écrit par Aldous Huxley.",
      "annee": 1932
    }]

}

 Avec ce code, ma liste est bien créée dans soucis, mais j'aimerais afficher les livres par ordre alphabétique. Avez)vous une idée? Merci d'avance. 

-
Edité par SmileyBoy 5 juillet 2020 à 22:48:46

Bonsoir, je pense que le mieux serait que l'objet JSON soit déjà par ordre alphabétique, si tu ne peux pas trier directement ton fichier JSON je pense que tu devrais utiliser la fonction sort() sur "entries" avant de l'afficher. Je te laisse chercher une fonction de triage par ordre alphabétique qui utilise sort() et dis nous en des nouvelles .

Bonsoir et merci de ta réponse déjà, ensuite je ne peux pas trier le fichier JSON directement, du coup il faut que je le tri automatiquement lors de l'affichage. J'avais trouvé la fonction sort, mais j'ai l'impression qu'elle ne s'appelle que pour les array (je me trompe?), ainsi j'avais essayé de rajouter la ligne suivante pour trier la map, mais sans succès: 

data_sorted=data.entries.map((ent, i).sort((a,b) => a.titre - b.titre);

data_sorted => {

...

}

-
Edité par SmileyBoy 6 juillet 2020 à 0:27:53

Dans ce que tu as ajouté, tu tries une fois que tu as affiché donc sa ne marche pas, pour trier avant d'afficher tu as juste à ajouter la ligne avec la fonction sort avant le "map", comme ça (ceci devrait marcher dans render):

data.entries = data.entries.sort((a, b)=> (a > b) ? 1 : -1)
data.entries.map((ent, titre)=>{
    return (<li key={ent.titre}><br><h3>{ent.titre}</h3></br></li>);
})

Oh bah merci beaucoup ça marche parfaitement! Bonne soirée

Avec plaisir