Convert CSV data into JSON format using Javascript

I have data in CSV format data and want to convert into JSON format using Javascript.

Following are csv format:

[Test.csv]
id;name;author
integer;string;authors:n
1;To Kill an Angry Bird;1
[authors.csv]
id;name
integer;string
1;Harper Lee
2;JRR Tolkien
3;William Shakespeare

I want to get all the books with their authors. So please how can I implement it using Javascript.

2

6 Answers

The below should work for you.

All credit to

//var csv is the CSV file with headers
function csvJSON(csv){ var lines=csv.split("\n"); var result = []; // NOTE: If your columns contain commas in their values, you'll need // to deal with those before doing the next step // (you might convert them to &&& or something, then covert them back later) // jsfiddle showing the issue 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 result; //JavaScript object return JSON.stringify(result); //JSON
}

3

I would check out out PapaParse. They have a file called papaparse.min.js that you can drop into your project if need be. PapaParse has no dependencies.

I have used it myself and can verify it works, is convenient, and is well-documented.

Base on @DelightedD0D, I would add if (!lines[i]) continue so it can ignore any empty line and trailing lines.

function csvJSON(csv) { const lines = csv.split('\n') const result = [] const headers = lines[0].split(',') for (let i = 1; i < lines.length; i++) { if (!lines[i]) continue const obj = {} const currentline = lines[i].split(',') for (let j = 0; j < headers.length; j++) { obj[headers[j]] = currentline[j] } result.push(obj) } return result
}

1

I think, I have a better solution, this also have one issue i.e. the values should not contain comma(,). Otherwise it is a best solution.

 // convert csv to json
csvJSON(csvText) {
let lines = [];
const linesArray = csvText.split('\n');
// for trimming and deleting extra space
linesArray.forEach((e: any) => { const row = e.replace(/[\s]+[,]+|[,]+[\s]+/g, ',').trim(); lines.push(row);
});
// for removing empty record
lines.splice(lines.length - 1, 1);
const result = [];
const headers = lines[0].split(",");
for (let i = 1; i < lines.length; i++) { const obj = {}; const currentline = lines[i].split(","); for (let j = 0; j < headers.length; j++) { obj[headers[j]] = currentline[j]; } result.push(obj);
}
//return result; //JavaScript object
// return JSON.stringify(result); //JSON
return result;
}
// For Reading CSV File
readCSV(event) {
const reader = new FileReader();
reader.readAsText(event.files[0]);
reader.onload = () => { const text = reader.result; const csvToJson = this.csvJSON(text); console.log(csvToJson);
};
}

Thank you

Here is my try on your SPECIFIC example. I know it is an old question but I have used current methods

const titlesCsv = `id;name;author
integer;string;authors:n
1;To Kill an Mockingbird;1
2;Lord of the Rings;2
3;Hamlet;3`
const authorsCsv = `id;name
integer;string
1;Harper Lee
2;JRR Tolkien
3;William Shakespeare`
const parseCsv = csv => { let lines = csv.split("\n"); const header = lines.shift().split(";") lines.shift(); // get rid of definitions return lines.map(line => { const bits = line.split(";") let obj = {}; header.forEach((h, i) => obj[h] = bits[i]); // or use reduce here return obj; })
};
const titles = parseCsv(titlesCsv)
const authors = parseCsv(authorsCsv)
const books = titles.map(title => { return { id: title.id, name: title.name, author: authors.find(author => author.id === title.author).name }
})
console.log(books)

I have a similar answer like @DelightedD0D but my code can be used in conjunction with Excel directly (copy and paste from Excel into a textarea).

function csvUpload(csvText){ //Split all the text into seperate lines on new lines and carriage return feeds var allTextLines = csvText.split(/\r\n|\n/); //Split per line on tabs and commas var headers = allTextLines[0].split(/\t|,/); var lines = []; var locations = []; for (var i=1; i<allTextLines.length; i++) { var data = allTextLines[i].split(/\t|,/); if (data.length == headers.length) { var location = {"device_id":data[0], "address":data[1], "city":data[2]}; locations.push(location); } } return locations; }

This way you can use a CSV that is copied into Excel. Excel will remove the seperators like , and others and will insert newlines etc.

With the my code you can pass everything into a textfield directly from Excel and then use that to create a json.

I have the naming of the fields static here, but you could use @DelightedD0D's code to set the headers dynamically:

 for(var j=0;j<headers.length;j++){ obj[headers[j]] = currentline[j]; }