Trier fichier JSON

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Jpe54
Messages : 60
Enregistré le : 10 mars 2017, 14:11

Trier fichier JSON

Message par Jpe54 » 29 juin 2021, 15:33

Bonjour,

J'ai créé une base de données JSON et utilisé l'API pour le chargement des fichiers par volonté d'utilisation sur serveur mais également Off Line.

Le chargement de la base est correct mais je souhaite ajouter des tris alphanumérique sur les champs des colonnes.

Malgré différentes lectures le tri de cette base ne fonctionne pas. Eventuellement une date devrait être en ISO 8601 standard
"2012-03-19T07:22:00Z" pour base JSON mais pour les autres données ? Sur ce coup Google n'est pas mon ami !

Je pourrai contourner en chargeant un tableau *.js Array mais par souci "formateur" j'aimerai comprendre pourquoi le tri d'une base JSON ne fonctionne pas sur l'objet chargé.

Type de codage en cause (sauf erreur inactif vu absence d'erreur en console) :

Code : Tout sélectionner

// var obj = JSON.parse(MyFichier.result).sort(function(key1,key2){return key2.Lieu < key1.Lieu;} );
// ou
obj.sort(function(key1,key2){return key2.Lieu < key1.Lieu;} );
Merci par avance.

Bien cordialement à tous.

Code HTML / CSS / Javascript :

Code : Tout sélectionner

<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
<style type="text/css">
 body {
  font-family:Verdana, Geneva, sans-serif;
  background-color:#b2bdc6;
 } 
 
 table {
  border:3px solid #6495ed;
  border-collapse:collapse;
  width:50%;
  margin:auto;
 }

 tbody {
  background-color:#FFFFFF;
  border:1px solid #6495ed;
 }

 th {
  padding:5px;
  background-color:#EFF6FF;
  width:15%;
 }
 
 td {
  font-family:sans-serif;
  font-size:80%;
  border:1px solid #6495ed;
  padding:5px;
  text-align:center;
 }
 </style>

</head>
<body>
<input type="file" accept=".json" onchange="loadFile(event)" aria-label="Recherche">

 <table>
    <thead>
        <tr>
			<th>Comptage</th>
            <th>Date</th>
			<th>Lieu</th>
			<th>Site</th>
        </tr>
    </thead>
    <tbody id="MyListing">
        
    </tbody>
</table>

<script>

function loadFile(e) {
        const input = e.target;
        const MyFichier = new FileReader();
        MyFichier.readAsText(input.files[0]);
        MyFichier.onload = () => {
            // console.log(JSON.parse(MyFichier.result));
            //sauvegarde dans le localstorage
				
		// var obj = JSON.parse(MyFichier.result).sort(function(key1,key2){return key2.Lieu < key1.Lieu;} );
		
		var obj = JSON.parse(MyFichier.result);
		
		obj.sort(function(key1,key2){return key2.Lieu < key1.Lieu;} );
	
		document.getElementById("MyListing").innerHTML=''
		// Construction du Listing
   
			for (var i = 0 ; i < obj.length ; i++) {    
				var Ligne = document.getElementById("MyListing").insertRow(-1)
				// Index (Compteur)
				var Contenant = Ligne.insertCell(-1); 
				Contenant.textContent = i + 1
				// Les données de la base
				Contenant = Ligne.insertCell(-1);
				Contenant.textContent = obj[i].Date  
				Contenant = Ligne.insertCell(-1);
				Contenant.textContent = obj[i].Lieu
				Contenant = Ligne.insertCell(-1);
				Contenant.textContent = obj[i].Site
			}
			
        };
}

</script>

</body>
</html>
Base JSON (simplifiée) :

Code : Tout sélectionner

[
  {
    "Date": "2020-08-29",
    "Lieu": "Saint-Montan",
    "Site": ""
  },
  {
    "Date": "2020-08-29",
    "Lieu": "Bollène",
    "Site": "Collegiale Saint Martin"
  },
  {
    "Date": "2020-08-30",
    "Lieu": "Suze-la-Rousse",
    "Site": "Château"
  },
 ]
Fichier exemple HTML et JSON complet :
Affichage JSON.zip
(1.69 Kio) Téléchargé 262 fois

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Trier fichier JSON

Message par webmaster » 29 juin 2021, 16:16

Bonjour,

La méthode sort() doit retourner un nombre négatif, positif ou nul pour faire le tri, pas un booleen
La bonne fonction de tri est :

Code : Tout sélectionner

obj.sort(function (a, b) {
   if (a.Lieu < b.Lieu) {
     return -1;
   } else {
     return 1;
   }
});

PS: interessant le FileReader. Je vais en faire une fiche
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Jpe54
Messages : 60
Enregistré le : 10 mars 2017, 14:11

Re: Trier fichier JSON

Message par Jpe54 » 29 juin 2021, 17:21

Nickel ! Un grand merci pour ce coup de main et cette réactivité !

Je savais le développement comme étant la science de la modestie, mais j'ignorai pouvoir vous faire découvrir quelque chose.

Ravi de vous renvoyer l'ascenseur vu toutes les informations vraies et les aides de j'obtiens ici.

Amitiés à vous tous

Répondre