Forums Tout JavaScript

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é 267 fois

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

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

Forums Tout JavaScript

Trier fichier JSON

Trier fichier JSON

Re: Trier fichier JSON

Re: Trier fichier JSON