Schritte zum Erstellen von JavaScript-Objekten aus Textdaten aus einer CSV-Datei ohne Bibliotheken

Question

Ich muss Daten aus einer CSV-Datei in ein JavaScript-Objekt konvertieren, wobei Schlüssel für jedes Objekt die ID aus den Daten ist. Ein JS-Objekt für jeden Benutzer.

Frage: Gibt es eine Möglichkeit, es mit Vanille JS zu lösen?

Ich brauche zumindest eine allgemeine Anleitung, was zu tun ist, weil alles, was ich finden konnte, Methoden zur Lösung dieses Problems mit jQuery oder JSON ist, aber für die Forschung, die ich versuche zu verstehen, kann ich ' t ich benutze eine spezialisierte Bibliothek, darf ich nur normales VanillaJS verwenden.

Beispieltextdaten:

id first_name last_name email    gender 
-- ---------- --------- -----    ------ 
1 Gloria  Mendez  gmendez@ipu.gov  Female 
2 Lucy   Grey   lgrey@gmail.com  Female 
3 Max   Mcolom  mmcolom@yahoo.com Male 
4 David   Cooke  dcooke@gmail.com  Male 
5 Marwin  Darge  mdarge@gov.com  Male 

hundreds of other rows 

gewünschter Ausgang:

{ 
    1: { 
    id: 1, first_name: 'Gloria', last_name: 'Mendez', email: 'gmendez@ipu.gov', gender: 'female' 
    }, 
    2: { 
    id: 1, first_name: 'Lucy', last_name: 'Grey', email: 'lgrey@gmail.com', gender: 'female' 
    }, 
    ... 
} 

Answer 1

Vanille Verwendung unter JS.

Ich habe Kommentare hinzugefügt, um zu erklären, was der Code macht. Es; s Aufspaltung im Grunde die Daten in Zeilen und Zellen dann, und auf dem Weg Array Manipulation zu tun:

let table = 
 
`id first_name last_name email    gender 
 
-- ---------- --------- -----    ------ 
 
1 Gloria  Mendez  gmendez@ipu.gov  Female 
 
2 Lucy   Grey   lgrey@gmail.com  Female 
 
3 Max   Mcolom  mmcolom@yahoo.com Male 
 
4 David   Cooke  dcooke@gmail.com  Male 
 
5 Marwin  Darge  mdarge@gov.com  Male` 
 

 
// Split into rows, and then split each row into cells 
 
let rows = table.split(/[\r\n]+/g).map(row => row.trim().split(/[\s\t]+/g)); 
 
// The first row will be the header 
 
let header = rows[0]; 
 
// The rest is the data 
 
let data = rows.slice(2); 
 

 

 
// Create a function to return the desired object structure 
 
function formatObject(headers, cells) { 
 
    return headers.reduce((result, header, idx) => { 
 
    result[header] = cells[idx]; 
 
    return result; 
 
    }, {}); 
 
} 
 

 
// Reduce each row into the desired format, and use the ID as a key 
 
let result = data.reduce((res, row, idx) => { 
 
    let value = formatObject(header, row); 
 
    res[value.id] = value; 
 
    return res; 
 
}, {}); 
 

 
// Log the result 
 
console.log(result);

Answer 2

• Split auf Zeilenumbruch \n die Datei parsen, um Reihen zu erhalten

const rows = csv.split('\n');

• Split jede Zeile auf Komma , Zellen zu erhalten (wenn es CSV ist, andernfalls \t für TSV)

const rawData = rows.map(d => d.split(',');

die Header aus der 1. Reihe Auszug

der ersten Zeile der Daten ist die Liste der Schlüssel zum Erstellen von Objekten

const headers = rawData[0]

Convert Zeilen in Objekte

const data = rawData.slice(2); // get rid of first 2 rows 
const output = data.map(row => { 
    const obj = {}; 
    headers.forEach((h, i) => obj[h] = row[i] }); 
    return obj; 
}); 

Natürlich müssen Sie alle Arten von Rand Fälle behandeln, wie Kommas in der Zelle CSV, Daten usw. fehlt ...

Ich hoffe, das Sie bekommt gestartet.

Answer 3

Angenommen, Sie laden die Daten bereits, könnten Sie die Daten durchlaufen und die Javascripts-Objektklammernotation verwenden, um die neuen Eigenschaften basierend auf der ID zu definieren.

Wenn Sie Schritt für Schritt suchen,

1. erste Last der csv etwas wie Knotens fs-Modul oder das Filereader im Browser.
2. für jede Zeile lesen Sie die CSV mit Javascript-Split zu analysieren.
3. Wenn die ID immer die erste Spalte ist, können Sie jetzt die ID der Daten mit dem SplitArray [0] erhalten.

4. Erstellen Sie ein neues Objekt, und verwenden Sie dann Klammern-Notation, um die Eigenschaft des Objekts auf die ID zu setzen. Ex.

   var obj = {}; obj[splitArray[0]] = data;

Das ist wirklich rau, nicht getestet, aber sollten Sie näher kommen, wo Sie gehen müssen.

Answer 4

Unter der Annahme einer doppelten Anführungszeichen durch Komma getrennte Datei, die über die am häufigsten csv Format ist:

/* empty lines shown on purpose to approximate real file */ 
 
const csvString = 
 
`"id","first_name","last_name","email","gender" 
 

 
"1","Gloria","Mendez","gmendez@ipu.gov","Female" 
 
"2","Lucy","Grey","lgrey@gmail.com","Female" 
 
"3","Max","Mcolom","mmcolom@yahoo.com","Male" 
 

 
"4","David","Cooke","dcooke@gmail.com","Male" 
 
"5","Marwin","Darge","mdarge@gov.com","Male"`; 
 

 

 
//split string on line breaks into array of line strings 
 
const csvLines=csvString.split('\n'); 
 
// filter empty lines out and map each line to sub array 
 
let arr = csvLines.filter(s=>s.trim()).map(arrFromLine) 
 
// get headings from first line 
 
let headings = arr.shift(); 
 
// map all the other lines into objects 
 
let res = arr.map(lineArr =>{ 
 
    return lineArr.reduce((a,c, i)=>{ 
 
     a[headings[i]] = c; 
 
     return a 
 
    },{}) 
 
}); 
 

 
// map lines to array helper function 
 
function arrFromLine(str){ 
 
    // remove quotes on each end, split at `","` to avoid any other commas in text 
 
    return str.trim().slice(1, str.length-1).split('","');  
 
} 
 

 
console.log(res)

.as-console-wrapper { \t max-height: 100%!important;}