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;} );
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>
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"
},
]