Converting JSON object to CSV format in JavaScript
JavascriptArraysJsonCsvJavascript Problem Overview
I am trying to convert a JavaScript object set in to CSV format
You can get the idea about my Javascript object, if you put it in online JSON parser https://jsonformatter.org/json-parser
This is how I tried to work it out... but it flopped.. http://jsfiddle.net/fHQzC/11/
I am trying to take the whole values corresponding to the value "term" and corresponding title in to CSV format
The expected output for is like
Time,Dec 9, 2012
News,Germany,election, Egypt,Revolution, Japan, Earthquake
Person,Obama, Beckham
Title,Pearce Snubs Beckham
Time,Dec 5, Birthday
Person, Lebron James
News,Italy,Euro 2012 Final
Title-Heats National Champions
and is it possible to download the csv file in excel sheet the one I found in Stackoverflow was not really useful me...
Javascript Solutions
Solution 1 - Javascript
you can try as
$(document).ready(function () {
// Create Object
var items = [
{ name: "Item 1", color: "Green", size: "X-Large" },
{ name: "Item 2", color: "Green", size: "X-Large" },
{ name: "Item 3", color: "Green", size: "X-Large" }];
// Convert Object to JSON
var jsonObject = JSON.stringify(items);
// Display JSON
$('#json').text(jsonObject);
// Convert JSON to CSV & Display CSV
$('#csv').text(ConvertToCSV(jsonObject));
});
and a function ConvertToCSV
// JSON to CSV Converter
function ConvertToCSV(objArray) {
var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
var str = '';
for (var i = 0; i < array.length; i++) {
var line = '';
for (var index in array[i]) {
if (line != '') line += ','
line += array[i][index];
}
str += line + '\r\n';
}
return str;
}
Solution 2 - Javascript
Probably more elegant and the simplest solution
function convertToCSV(arr) {
const array = [Object.keys(arr[0])].concat(arr)
return array.map(it => {
return Object.values(it).toString()
}).join('\n')
}
console.log(
convertToCSV(
[
{
id: 1,
name: 'Foo',
timestamp: new Date()
},
{
id: 2,
name: 'Bar',
timestamp: new Date()
},
{
id: 3,
name: 'Baz',
timestamp: new Date()
}
]
)
)
Solution 3 - Javascript
Here is my solution
function arrayToCSV(objArray) {
const array = typeof objArray !== 'object' ? JSON.parse(objArray) : objArray;
let str = `${Object.keys(array[0]).map(value => `"${value}"`).join(",")}` + '\r\n';
return array.reduce((str, next) => {
str += `${Object.values(next).map(value => `"${value}"`).join(",")}` + '\r\n';
return str;
}, str);
}
Example:
let arr = [{name: "Essa", age: 25}];
console.log(arrayToCSV(arr));
Solution 4 - Javascript
Here's a solution similar to mightybruno's answer that handles strings containing commas. None of the other answers seem to take this in to consideration.
function objectsToCSV(arr) {
const array = [Object.keys(arr[0])].concat(arr)
return array.map(row => {
return Object.values(row).map(value => {
return typeof value === 'string' ? JSON.stringify(value) : value
}).toString()
}).join('\n')
}
Solution 5 - Javascript
Below code will convert and download JSON array to csv as a file.
function exportJSONToCSV(objArray) {
var arr = typeof objArray !== 'object' ? JSON.parse(objArray) : objArray;
var str =
`${Object.keys(arr[0])
.map((value) => `"${value}"`)
.join(',')}` + '\r\n';
var csvContent = arr.reduce((st, next) => {
st +=
`${Object.values(next)
.map((value) => `"${value}"`)
.join(',')}` + '\r\n';
return st;
}, str);
var element = document.createElement('a');
element.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvContent);
element.target = '_blank';
element.download = 'export.csv';
element.click();
}
Solution 6 - Javascript
This is a quick & dirty, but probably works for most cases:
const headers = Object.keys(objAry[0])
console.log(headers.join())
objAry.forEach(r => console.log(
Object.values(r)
.map(c => Array.isArray(c)? `"${c.join()}"` : c)
.join())
)
Solution 7 - Javascript
This is my solution
https://jsfiddle.net/dhou6y3o/
function iterateObject(obj) {
var value = '', header = '';
for (name in obj) {
if (obj.hasOwnProperty(name)) {
if (isObject(obj[name])) {
var out = iterateObject(obj[name]);
value += out.value;
header += out.header;
} else {
value += removeNewLine(obj[name]) + '; ';
header += name + '; ';
}
}
}
return {
"value":value,
"header":header
};
}
function isObject(obj) {
return (typeof obj === 'object');
}
function removeNewLine(item) {
return item.toString().replace(/(\r\n|\n|\r)/gm,"");
}
Solution 8 - Javascript
Use papaparse library to convert JSON to CSV and Vice Versa. Refer to this link - https://www.papaparse.com/
Solution 9 - Javascript
Similar to mightybruno's answer but this would allow separate access to the headers and content (by moving the join
statements to later in the function) if desired.
function objToCsv(data) {
const headers = Object.keys(data[0]).join();
const content = data.map(r => Object.values(r).join());
return [headers].concat(content).join("\n");
}
Solution 10 - Javascript
function objToCsv(arr) {
let claves = Object.keys(arr[0]).sort();
let rows = claves.join(";") + "\r\n";
arr.forEach((row) => {
let nrow = [];
claves.forEach((clave) => {
let valor = JSON.stringify(row[clave]);
nrow.push(valor.split(";").join(" ").split(",").join(" "));
});
rows = rows + nrow.join(";") + "\r\n";
});
return rows;
}
Solution 11 - Javascript
All the answers do not work for me, because I have a buggy object with unpredictable contents, so I had to implement my own solution which creates a "normalized" array before converting to CSV:
function objToCSV(originalArray) {
header = [];
result = [];
finalCSV = "";
originalArray.forEach(
a => { /// Parse all rows of input ///
row = []; // Create for each row of the input an enpty row for the output
for (const [key, value] of Object.entries(a)) {
/// Parse all elements of input row ///
console.log(`${key}: ${value}`);
if (header.indexOf(`${key}`) < 0) {
// Add field to header if not already present
header.push(`${key}`);
}
// Put value in the right position in the array depending on field name:
row[header.indexOf(`${key}`)]=`${value}`;
};
result.push(row); // Add finished line to output array
console.log("--- row separator ---");
}
)
// Prepare header of CSV file:
header.forEach(fieldName => {
finalCSV += fieldName + "\t";
}
);
finalCSV += "\n";
// Add all rows to CSV file:
result.forEach(row => {
/// parse all rows of created array //
row.forEach(col => {
/// parse all elements of row ///
finalCSV += col + "\t"; // Add element to output CSV row
}
);
finalCSV += "\n";
}
);
return finalCSV;
}
Solution 12 - Javascript
Crafted this, works fine into LibreOfice.
It does retrieve the key names to build the columns header.
let example = [
,,,,,
{
"Time": 1647672300000,
"Open": 2937.37,
"High": 2933.81,
"Low": 2937.94,
"Close": 2937.39,
"Volume": 1547.5156
},,,,,
]
const getCSV = (object) => {
let csv = Object.entries(Object.entries(object)[0][1]).map((e) => e[0]).join(",");
for (const [k,v] of Object.entries(object)) {
csv += "\r\n" + Object.values(v).join(",") // \n is enough in linux to reduce the csv size
}
/* //Uncomment for file download
let j = document.createElement("a")
j.download = "example_"+Date.now()+".csv"
j.href = URL.createObjectURL(new Blob([csv]))
j.click() */
return csv;
}
console.log(
getCSV(example)
)