Je souhaite créer un objet JSON à partir du contenu d'un fichier CSV. Le fichier CSV est chargé localement via l'API FileReader et cela semble fonctionner, mais j'ai du mal à structurer le JSON de la manière souhaitée.
Mon code pour charger le fichier CSV ressemble à ceci:
<!DOCTYPE html>
<html>
<body>
<script>
var fileReader = new FileReader();
function getFile(inputFile) {
let file = inputFile.files[0];
fileReader.readAsText(file);
}
function csvJSON(csv){
var lines=csv.split("\n");
var result = [];
var headers=lines[0].split(",");
for(var i=1;i<lines.length;i++){
var obj = {};
var currentline=lines[i].split(",");
for(var j=0;j<headers.length;j++){
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
return JSON.stringify(result); //JSON
}
function readFile(evt) {
let parsed = csvJSON(evt.target.result);
return parsed;
}
</script>
</body>
</html>
Le code ci-dessus me permet de charger le contenu du fichier CSV et de les afficher sur la page en cours. Pour structurer les données CSV dans le format souhaité ci-dessus, j'ai essayé ce qui suit, mais cela n'a pas fonctionné pour moi:
<!DOCTYPE html>
<html>
<body>
<p>Select local CSV File:</p>
<input id="csv" type="file">
<output id="out"> input file content</output>
<script>
var fileInput = document.getElementById("csv"),
readFile = function () {
var reader = new FileReader();
reader.onload = function () {
// Display CSV file contents
document.getElementById('out').innerHTML = reader.result;
};
reader.readAsBinaryString(fileInput.files[0]);
};
fileInput.addEventListener('change', readFile);
</script>
</body>>
</html>
Comment puis-je acquérir mes objets JSON attendus ? Toutes les suggestions seraient appréciées
3 Réponses :
var csv = '"Timestamp","Enter First Name:","Enter Middle Initial","Enter Last Name:","Enter UIN:","Are you attending the event?"\n"2019/02/22 12:41:56 PM CST","Jonathan","Samson","Rowe","123456789","No"\n"2019/02/22 12:44:56 PM CST","phil","Aspilla","beltran","123456788","Yes"';
var csvJSON = function(csv) {
let vals = csv.split('\n'), ret = [];
for( let i = 1, len = vals.length; i < len; i++ ){
let person = vals[i].split(',');
ret.push({
uin : person[4],
studentInfo : {
firstName : person[1],
middleName : person[2],
lastName : person[3],
rsvpStatus : person[5]
}
});
}
return JSON.stringify(ret);
}
console.log(csvJSON(csv));
Ceci suppose que la structure du CSV est toujours la même.
Si vous avez du mal à analyser les données, vous pouvez également utiliser PapaParse, il a beaucoup de configurations et il est assez facile à utiliser:
// Parse CSV string var data = Papa.parse(csv);
Pour plus d'informations sur https://www.papaparse.com/demo
Une approche consiste à parcourir vos données CSV d'entrée par incréments de "6" (où 6 représente le nombre de bits de données différents pour chaque élève) pour capturer toutes les données d'élève par ligne CSV, puis à remplir un tableau d'objets JSON structurés au format souhaité comme suit:
/* Helper function to perform the CSV to JSON transform */
function convertToJson(inputCsv) {
/* Split input string by `,` and clean up each item */
const arrayCsv = inputCsv.split(',').map(s => s.replace(/"/gi, '').trim())
const outputJson = [];
/* Iterate through input csv at increments of 6, to capture entire CSV row
per iteration */
for (let i = 6; i < arrayCsv.length; i += 6) {
/* Extract CSV data for current row, and assign to named variables */
const [date, firstName, middleName, lastName, uin, rsvpStatus] =
arrayCsv.slice(i, i + 6)
/* Populate structured JSON entry for this CSV row */
outputJson.push({
uin,
studentInfo: {
firstName,
middleName,
lastName,
rsvpStatus
}
});
}
return outputJson;
}
/* Input CSV data from your exsiting code */
const csv = `"Timestamp", "Enter First Name:", "Enter Middle Initial",
"Enter Last Name:", "Enter UIN:", "Are you attending the event?",
"2019/02/22 12:41:56 PM CST", "Jonathan", "Samson", "Rowe", "123456789",
"No", "2019/02/22 12:44:56 PM CST", "phil", "Aspilla", "beltran", "123456788",
"Yes"`
const json = convertToJson(csv);
console.log(json);
merci pour votre aide, c'est du bon travail. BTW, chaque fois qu'un fichier csv local est téléchargé comme ma première partie de code, puis exécutez votre fonction dans le même extrait de code? quel est l'exemple entièrement fonctionnel qui me permet de télécharger un fichier csv local puis d'exécuter votre code? désolé pour ma question naïve. Merci beaucoup
@beyond_inifinity heureux de pouvoir vous aider! désolé je ne suis pas sûr de comprendre - voulez-vous que je vous montre comment intégrer la fonction convertToJson () dans ma réponse, avec le code dans votre question?
ouais, comment puis-je faire la première partie de mon code et votre code contribué ensemble dans un exemple de travail d'analyse complète? ou je n'ai pas besoin de ma première partie du code? Je suis désolé pour cette question. Je vais accepter votre solution, c'est gros plus
@beyond_inifinity heureux d'entendre que cela a aidé, et merci d'avoir accepté la réponse. J'ai créé un jsFiddle jsfiddle.net/yrsap3ej pour montrer comment le code peut être intégré - j'espère que cela aidera: )
@Darce Denny: à partir de votre solution, comment puis-je exporter le nouveau JSON structuré produit vers un lecteur local? une idée?
Salut, une méthode serait de créer un lien de téléchargement temporaire vers les données via une URL de données, je publierai un lien ici sous peu
@beyond_inifinity jetez un œil à ce codepen.io/vidhill/pen/bNPEmX . Cela vous permet de télécharger des données depuis votre application vers un fichier sur votre machine locale (c.-à-d. Disque dur). J'espère que ça t'as aidé
Juste curieux, mais est-ce votre structure CSV réelle? Il semble qu'il devrait y avoir un caractère de retour à la ligne
\ ntoutes les 6 entrées ...