JavaScript: Convert CSV to Array

In this tutorial we are going to show a simple way to take this housing dataset in CSV format (comma-seperated values) and turn it into an array of objects using JavaScript.

TLDR

How to Upload the file
How to Download the file

const rawData = `price,area,bedrooms,bathrooms,stories,mainroad,guestroom,basement,hotwaterheating,airconditioning
13300000,7420,4,2,3,yes,no,no,no,yes
12250000,8960,4,4,4,yes,no,no,no,yes
12250000,9960,3,2,2,yes,no,yes,no,no
12215000,7500,4,2,2,yes,no,yes,no,yes
11410000,7420,4,1,2,yes,yes,yes,no,yes`;

let rows = rawData.split('\n');
let titleRowArray = rows.shift().split(',');

let housingDataArray = [];
rows.forEach((housingEntry, index) => {
    let housingObject = new Object();
    // creat array from CSV entry string
    let housingEntryArray = housingEntry.split(",");
    // loop over every element in the housingEntryArray to build the housingObject
    housingEntryArray.forEach((e, i) => {
        // set each value with its corresponding title in the housing object
        housingObject[titleRowArray[i]] = e;
    });
    // append hosingObject to the housingDataArray
    housingDataArray.push(housingObject);
});

console.log(JSON.stringify(housingDataArray));

Will create the following array of housing objects from the input CSV data

[{"price":"13300000","area":"7420","bedrooms":"4","bathrooms":"2","stories":"3","mainroad":"yes","guestroom":"no","basement":"no","hotwaterheating":"no","airconditioning":"yes"},
{"price":"12250000","area":"8960","bedrooms":"4","bathrooms":"4","stories":"4","mainroad":"yes","guestroom":"no","basement":"no","hotwaterheating":"no","airconditioning":"yes"},
{"price":"12250000","area":"9960","bedrooms":"3","bathrooms":"2","stories":"2","mainroad":"yes","guestroom":"no","basement":"yes","hotwaterheating":"no","airconditioning":"no"},
{"price":"12215000","area":"7500","bedrooms":"4","bathrooms":"2","stories":"2","mainroad":"yes","guestroom":"no","basement":"yes","hotwaterheating":"no","airconditioning":"yes"},
{"price":"11410000","area":"7420","bedrooms":"4","bathrooms":"1","stories":"2","mainroad":"yes","guestroom":"yes","basement":"yes","hotwaterheating":"no","airconditioning":"yes"}]

The Data

Here is the data we will be using for this tutorial. It a small section for a machine learning housing dataset

price	area	bedrooms	bathrooms	stories	mainroad	guestroom	basement	hotwaterheating	airconditioning
13300000	7420	4	2	3	yes	no	no	no	yes
12250000	8960	4	4	4	yes	no	no	no	yes
12250000	9960	3	2	2	yes	no	yes	no	no
12215000	7500	4	2	2	yes	no	yes	no	yes
11410000	7420	4	1	2	yes	yes	yes	no	yes

price,area,bedrooms,bathrooms,stories,mainroad,guestroom,basement,hotwaterheating,airconditioning,
13300000,7420,4,2,3,yes,no,no,no,yes,
12250000,8960,4,4,4,yes,no,no,no,yes,
12250000,9960,3,2,2,yes,no,yes,no,no,
12215000,7500,4,2,2,yes,no,yes,no,yes,
11410000,7420,4,1,2,yes,yes,yes,no,yes,

Code showing core functionality

In this section we will use the following block of code to demonstrate the core concepts of how to convert a csv file into an array of JavaScript objects.

The first section of code sets rawData to a single string of CSV data, where the first row of the string is the title row containing the label for the subsequent data rows. The next rows are data rows. What is important to note here is that rawData is a single string. We will need to identify a way to segment it, so we can break it apart the sections into our JS object. In this case the row delimiter is a new line \n and each value in the row is comma delimited ,. This is important because we will use these characteristics of the data to break it apart into a js array of objects.

The first step is to break apart the single string into an array of strings. This block of code will split apart the single rawData string (our sample csv file data) into a new array of strings with one element for each line. In this case we will have an array of 6 elements, the header row and the five data rows. Checkout the output to see what is happening.

const rawData = `price,area,bedrooms,bathrooms,stories,mainroad,guestroom,basement,hotwaterheating,airconditioning
13300000,7420,4,2,3,yes,no,no,no,yes
12250000,8960,4,4,4,yes,no,no,no,yes
12250000,9960,3,2,2,yes,no,yes,no,no
12215000,7500,4,2,2,yes,no,yes,no,yes
11410000,7420,4,1,2,yes,yes,yes,no,yes`;

let rows = rawData.split('\n');
console.log("rows: " + JSON.stringify(rows));

output:

rows: ["price,area,bedrooms,bathrooms,stories,mainroad,guestroom,basement,hotwaterheating,airconditioning",
"13300000,7420,4,2,3,yes,no,no,no,yes",
"12250000,8960,4,4,4,yes,no,no,no,yes",
"12250000,9960,3,2,2,yes,no,yes,no,no",
"12215000,7500,4,2,2,yes,no,yes,no,yes",
"11410000,7420,4,1,2,yes,yes,yes,no,yes"]

This section of code calls the shift() function on the row array. The shift function will remove the first element of the array and return it. This resulting in the rows array being set to just the data array values.

let titleRow = rows.shift();
console.log("titles: " + titleRow);
console.log("rows after shift: " + JSON.stringify(rows));

output:

titles: price,area,bedrooms,bathrooms,stories,mainroad,guestroom,basement,hotwaterheating,airconditioning

rows after shift: ["13300000,7420,4,2,3,yes,no,no,no,yes",
"12250000,8960,4,4,4,yes,no,no,no,yes",
"12250000,9960,3,2,2,yes,no,yes,no,no",
"12215000,7500,4,2,2,yes,no,yes,no,yes",
"11410000,7420,4,1,2,yes,yes,yes,no,yes"]

The following code will take the title row string and split up into an array of individual elements using the comma , as the specified separator aka: delimiter

let titleRowArray = titleRow.split(',');
console.log("titleRowArray: " + JSON.stringify(titleRowArray));

output:

titleRowArray: ["price","area","bedrooms","bathrooms","stories","mainroad","guestroom","basement","hotwaterheating","airconditioning"]

This section of JavaScript code will split up our first data row into an array of values

let rowOneArray = rows[0].split(',');
console.log("rowOneArray: " + JSON.stringify(rowOneArray));

output:

rowOneArray: ["13300000","7420","4","2","3","yes","no","no","no","yes"]

Here we are creating a placeholder object to be populated

let housingObject = new Object();
console.log("titleRowArray 0: " + JSON.stringify(titleRowArray[0]));
console.log("rawData[0][0]: " + JSON.stringify(rows[0][0]));

output:

titleRowArray 0: "price"
rawData[0][0]: "1"

Finally, we construct the housing object data and print out the final result

housingObject[titleRowArray[0]] = rowOneArray[0];
housingObject[titleRowArray[1]] = rowOneArray[1];
housingObject[titleRowArray[2]] = rowOneArray[2];
housingObject[titleRowArray[3]] = rowOneArray[3];
housingObject[titleRowArray[4]] = rowOneArray[4];

console.log("housingObject: " + JSON.stringify(housingObject));

output:

housingObject: {"price":"13300000","area":"7420","bedrooms":"4","bathrooms":"2","stories":"3"}

Full code

const rawData = `price,area,bedrooms,bathrooms,stories,mainroad,guestroom,basement,hotwaterheating,airconditioning
13300000,7420,4,2,3,yes,no,no,no,yes
12250000,8960,4,4,4,yes,no,no,no,yes
12250000,9960,3,2,2,yes,no,yes,no,no
12215000,7500,4,2,2,yes,no,yes,no,yes
11410000,7420,4,1,2,yes,yes,yes,no,yes`;

let rows = rawData.split('\n');
console.log("rows: " + rows);

let titleRow = rows.shift();
console.log("titles: " + titleRow);
console.log("rows after shift: " + rows);

let titleRowArray = titleRow.split(',');
console.log("titleRowArray: " + titleRowArray);

let rowOneArray = rows[0].split(',');
console.log("rowOneArray: " + rowOneArray);

let housingObject = new Object();
console.log("titleRowArray 0: " + titleRowArray[0]);
console.log("rawData[0][0]: " + rows[0][0]);

housingObject[titleRowArray[0]] = rowOneArray[0];
housingObject[titleRowArray[1]] = rowOneArray[1];
housingObject[titleRowArray[2]] = rowOneArray[2];
housingObject[titleRowArray[3]] = rowOneArray[3];
housingObject[titleRowArray[4]] = rowOneArray[4];

console.log("housingObject: " + JSON.stringify(housingObject));

More useful version

With loops to automate creating the whole object

While the above code is helpful to demonstrate the core processes of our code it lacks the ability to take in an arbitrary amount of data. Lets fix that by adding a few forEach loops to iterate over every line of data in our dataset.

const rawData = `price,area,bedrooms,bathrooms,stories,mainroad,guestroom,basement,hotwaterheating,airconditioning
13300000,7420,4,2,3,yes,no,no,no,yes
12250000,8960,4,4,4,yes,no,no,no,yes
12250000,9960,3,2,2,yes,no,yes,no,no
12215000,7500,4,2,2,yes,no,yes,no,yes
11410000,7420,4,1,2,yes,yes,yes,no,yes`;

let rows = rawData.split('\n');
let titleRowArray = rows.shift().split(',');

let housingDataArray = [];
rows.forEach((housingEntry, index) => {
    let housingObject = new Object();
    // creat array from CSV entry string
    let housingEntryArray = housingEntry.split(",");
    // loop over every element in the housingEntryArray to build the housingObject
    housingEntryArray.forEach((e, i) => {
        // set each value with its corresponding title in the housing object
        housingObject[titleRowArray[i]] = e;
    });
    // append hosingObject to the housingDataArray
    housingDataArray.push(housingObject);
});

console.log("housingDataArray: " + JSON.stringify(housingDataArray));

Logs to show the building of one full housingObject entry

housingEntry: "13300000,7420,4,2,3,yes,no,no,no,yes"
housingEntryArray: ["13300000","7420","4","2","3","yes","no","no","no","yes"]
titleRowArray[i]: price
e: 13300000
housingObject: {"price":"13300000"}
titleRowArray[i]: area
e: 7420
housingObject: {"price":"13300000","area":"7420"}
titleRowArray[i]: bedrooms
e: 4
housingObject: {"price":"13300000","area":"7420","bedrooms":"4"}
titleRowArray[i]: bathrooms
e: 2
housingObject: {"price":"13300000","area":"7420","bedrooms":"4","bathrooms":"2"}
titleRowArray[i]: stories
e: 3
housingObject: {"price":"13300000","area":"7420","bedrooms":"4","bathrooms":"2","stories":"3"}
titleRowArray[i]: mainroad
e: yes
housingObject: {"price":"13300000","area":"7420","bedrooms":"4","bathrooms":"2","stories":"3","mainroad":"yes"}
titleRowArray[i]: guestroom
e: no
housingObject: {"price":"13300000","area":"7420","bedrooms":"4","bathrooms":"2","stories":"3","mainroad":"yes","guestroom":"no"}
titleRowArray[i]: basement
e: no
housingObject: {"price":"13300000","area":"7420","bedrooms":"4","bathrooms":"2","stories":"3","mainroad":"yes","guestroom":"no","basement":"no"}
titleRowArray[i]: hotwaterheating
e: no
housingObject: {"price":"13300000","area":"7420","bedrooms":"4","bathrooms":"2","stories":"3","mainroad":"yes","guestroom":"no","basement":"no","hotwaterheating":"no"}
titleRowArray[i]: airconditioning
e: yes
housingObject: {"price":"13300000","area":"7420","bedrooms":"4","bathrooms":"2","stories":"3","mainroad":"yes","guestroom":"no","basement":"no","hotwaterheating":"no","airconditioning":"yes"}

Final result

housingDataArray: 
[{"price":"13300000","area":"7420","bedrooms":"4","bathrooms":"2","stories":"3","mainroad":"yes","guestroom":"no","basement":"no","hotwaterheating":"no","airconditioning":"yes"},
{"price":"12250000","area":"8960","bedrooms":"4","bathrooms":"4","stories":"4","mainroad":"yes","guestroom":"no","basement":"no","hotwaterheating":"no","airconditioning":"yes"},
{"price":"12250000","area":"9960","bedrooms":"3","bathrooms":"2","stories":"2","mainroad":"yes","guestroom":"no","basement":"yes","hotwaterheating":"no","airconditioning":"no"},
{"price":"12215000","area":"7500","bedrooms":"4","bathrooms":"2","stories":"2","mainroad":"yes","guestroom":"no","basement":"yes","hotwaterheating":"no","airconditioning":"yes"},
{"price":"11410000","area":"7420","bedrooms":"4","bathrooms":"1","stories":"2","mainroad":"yes","guestroom":"yes","basement":"yes","hotwaterheating":"no","airconditioning":"yes"}]

Other thoughts

The above code shows the core of converting csv file format type data to a js array. The following code are some useful tips and snippets that may be something you need for your project.

Write to file

While CSV is an easy format to work with JSON is even better in a lot of ways. So if you want to output the data to a JSON text file than this line of code will make that pretty easy

const a = document.createElement("a");
// creates a json file to be downloaded
a.href = URL.createObjectURL(new Blob([JSON.stringify(housingDataArray, null, 2)], {
type: "text/plain"
}));
a.setAttribute("download", "data.txt");
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

Read in file

If you want the user to upload flat files using their web browser than this section will show a simple way to do that. Once the user clicks the upload button than the following code will take in a JSON flat file and convert it into a JavaScript array of objects. Note that because this was JSON data and not CSV file data we are able to create a JavaScript object easily by calling JSON.stringify. This is one example as to why working with JSON can be a preferable choice compared to saving files off in CSV format.

<input type="file" onchange="previewFile()"><br>
<script>
function previewFile() {
    const content = document.querySelector('.content');
    const [file] = document.querySelector('input[type=file]').files;
    const reader = new FileReader();
    reader.addEventListener("load", () => {
        let data = JSON.parse(reader.result.toString());
        console.log("file contents: " + JSON.stringify(data));
    }, false);
    if (file) {
        reader.readAsText(file);
    }
}
</script>

Fun Surprise

Congrats for making it all the way to the end! As a fun surprise you should inspect your js console (usually right click->inspect then find the console). You will see that this example ran while you where reading the page. Check the log output to see and have a great day!!!