node - javascript json to csv download
Cómo convertir JSON a formato CSV y almacenar en una variable (7)
Hay múltiples opciones disponibles para reutilizar las potentes bibliotecas existentes basadas en estándares.
Si usa D3 en su proyecto, simplemente puede invocar:
d3.csv.format o d3.csv.formatRows funciona para convertir una matriz de objetos en cadena csv.
d3.csv.formatRows le brinda un mayor control sobre qué propiedades se convierten a csv.
Consulte las páginas wiki de d3.csv.format y d3.csv.formatRows .
También hay otras bibliotecas disponibles como jquery-csv , PapaParse . Papa Parse no tiene dependencias, ni siquiera jQuery.
Para complementos basados en jquery, verifique esto .
Tengo un enlace que abre datos json en el navegador, pero desafortunadamente no tengo ni idea de cómo leerlo. ¿Hay alguna forma de convertir estos datos mediante el formato javascript Comma Separate ( csv ) y guardarlo en una variable de javascript ? Acabo de empezar a aprender y no tengo absolutamente ninguna pista sobre json , sería genial si alguien pudiera escribir un guión para ello.
Los datos parecen:
{
"count": 2,
"items": [{
"title": "Apple iPhone 4S Sale Cancelled in Beijing Amid Chaos (Design You Trust)",
"description": "Advertise here with BSA Apple cancelled its scheduled sale of iPhone 4S in one of its stores in China/u2019s capital Beijing on January 13. Crowds outside the store in the Sanlitun district were waiting on queues overnight. There were incidents of scuffle between shoppers and the store/u2019s security staff when shoppers, hundreds of them, were told that the sales [...]Source : Design You TrustExplore : iPhone, iPhone 4, Phone",
"link": "http:////wik.io//info//US//309201303",
"timestamp": 1326439500,
"image": null,
"embed": null,
"language": null,
"user": null,
"user_image": null,
"user_link": null,
"user_id": null,
"geo": null,
"source": "wikio",
"favicon": "http:////wikio.com//favicon.ico",
"type": "blogs",
"domain": "wik.io",
"id": "2388575404943858468"
}, {
"title": "Apple to halt sales of iPhone 4S in China (Fame Dubai Blog)",
"description": "SHANGHAI /u2013 Apple Inc said on Friday it will stop selling its latest iPhone in its retail stores in Beijing and Shanghai to ensure the safety of its customers and employees. Go to SourceSource : Fame Dubai BlogExplore : iPhone, iPhone 4, Phone",
"link": "http:////wik.io//info//US//309198933",
"timestamp": 1326439320,
"image": null,
"embed": null,
"language": null,
"user": null,
"user_image": null,
"user_link": null,
"user_id": null,
"geo": null,
"source": "wikio",
"favicon": "http:////wikio.com//favicon.ico",
"type": "blogs",
"domain": "wik.io",
"id": "16209851193593872066"
}]
}
Lo más parecido que pude encontrar fue: convertir el formato JSON al formato CSV para MS Excel
Pero es descargas en un archivo CSV , lo almaceno en una variable, toda la información convertida.
También me gustaría saber cómo cambiar los caracteres de escape: ''/u2019'' vuelve a la normalidad.
Gracias por adelantado.
Intenté este código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JSON to CSV</title>
<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
var json3 = {
"count": 2,
"items": [{
"title": "Apple iPhone 4S Sale Cancelled in Beijing Amid Chaos (Design You Trust)",
"description": "Advertise here with BSA Apple cancelled its scheduled sale of iPhone 4S in one of its stores in China’s capital Beijing on January 13. Crowds outside the store in the Sanlitun district were waiting on queues overnight. There were incidents of scuffle between shoppers and the store’s security staff when shoppers, hundreds of them, were told that the sales [...]Source : Design You TrustExplore : iPhone, iPhone 4, Phone",
"link": "http://wik.io/info/US/309201303",
"timestamp": 1326439500,
"image": null,
"embed": null,
"language": null,
"user": null,
"user_image": null,
"user_link": null,
"user_id": null,
"geo": null,
"source": "wikio",
"favicon": "http://wikio.com/favicon.ico",
"type": "blogs",
"domain": "wik.io",
"id": "2388575404943858468"
},
{
"title": "Apple to halt sales of iPhone 4S in China (Fame Dubai Blog)",
"description": "SHANGHAI – Apple Inc said on Friday it will stop selling its latest iPhone in its retail stores in Beijing and Shanghai to ensure the safety of its customers and employees. Go to SourceSource : Fame Dubai BlogExplore : iPhone, iPhone 4, Phone",
"link": "http://wik.io/info/US/309198933",
"timestamp": 1326439320,
"image": null,
"embed": null,
"language": null,
"user": null,
"user_image": null,
"user_link": null,
"user_id": null,
"geo": null,
"source": "wikio",
"favicon": "http://wikio.com/favicon.ico",
"type": "blogs",
"domain": "wik.io",
"id": "16209851193593872066"
}
]
}
//var objJson = JSON.parse(json3.items);
DownloadJSON2CSV(json3.items);
function DownloadJSON2CSV(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]) {
line += array[i][index] + '','';
}
line.slice(0, line.Length - 1);
str += line + ''/r/n'';
}
$(''div'').html(str);
}
</script>
</head>
<body>
<div></div>
</body>
</html>
Pero parece que no funciona. ¿Puede ayudarme alguien, por favor?
Muy buena solución de praneybehl, pero si alguien quiere guardar los datos como un archivo csv y usar un método blob , entonces pueden referir esto:
function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
//If JSONData is not an object then JSON.parse will parse the JSON string in an Object
var arrData = typeof JSONData != ''object'' ? JSON.parse(JSONData) : JSONData;
var CSV = '''';
//This condition will generate the Label/Header
if (ShowLabel) {
var row = "";
//This loop will extract the label from 1st index of on array
for (var index in arrData[0]) {
//Now convert each value to string and comma-seprated
row += index + '','';
}
row = row.slice(0, -1);
//append Label row with line break
CSV += row + ''/r/n'';
}
//1st loop is to extract each row
for (var i = 0; i < arrData.length; i++) {
var row = "";
//2nd loop will extract each column and convert it in string comma-seprated
for (var index in arrData[i]) {
row += ''"'' + arrData[i][index] + ''",'';
}
row.slice(0, row.length - 1);
//add a line break after each row
CSV += row + ''/r/n'';
}
if (CSV == '''') {
alert("Invalid data");
return;
}
//this trick will generate a temp "a" tag
var link = document.createElement("a");
link.id="lnkDwnldLnk";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
var csv = CSV;
blob = new Blob([csv], { type: ''text/csv'' });
var csvUrl = window.webkitURL.createObjectURL(blob);
var filename = ''UserExport.csv'';
$("#lnkDwnldLnk")
.attr({
''download'': filename,
''href'': csvUrl
});
$(''#lnkDwnldLnk'')[0].click();
document.body.removeChild(link);
}
Ok, finalmente obtuve este código funcionando:
<html>
<head>
<title>Demo - Covnert JSON to CSV</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://github.com/douglascrockford/JSON-js/raw/master/json2.js"></script>
<script type="text/javascript">
// 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;
}
// Example
$(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));
});
</script>
</head>
<body>
<h1>
JSON</h1>
<pre id="json"></pre>
<h1>
CSV</h1>
<pre id="csv"></pre>
</body>
</html>
Muchas gracias por todo el apoyo a todos los colaboradores.
Praney
Solo quería agregar aquí algún código para las personas en el futuro, ya que estaba tratando de exportar JSON a un documento CSV y descargarlo.
Uso $.getJSON para extraer datos json de una página externa, pero si tiene una matriz básica, puede usarla.
Esto usa el código de Christian Landgren para crear los datos de csv.
$(document).ready(function() {
var JSONData = $.getJSON("GetJsonData.php", function(data) {
var items = data;
const replacer = (key, value) => value === null ? '''' : value; // specify how you want to handle null values here
const header = Object.keys(items[0]);
let csv = items.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join('',''));
csv.unshift(header.join('',''));
csv = csv.join(''/r/n'');
//Download the file as CSV
var downloadLink = document.createElement("a");
var blob = new Blob(["/ufeff", csv]);
var url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = "DataDump.csv"; //Name the file here
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
});
});
Una forma más elegante de convertir json a csv es usar la función de mapa sin ningún marco:
var json = json3.items
var fields = Object.keys(json[0])
var replacer = function(key, value) { return value === null ? '''' : value }
var csv = json.map(function(row){
return fields.map(function(fieldName){
return JSON.stringify(row[fieldName], replacer)
}).join('','')
})
csv.unshift(fields.join('','')) // add header column
console.log(csv.join(''/r/n''))
Salida:
title,description,link,timestamp,image,embed,language,user,user_image,user_link,user_id,geo,source,favicon,type,domain,id
"Apple iPhone 4S Sale Cancelled in Beijing Amid Chaos (Design You Trust)","Advertise here with BSA Apple cancelled its scheduled sale of iPhone 4S in one of its stores in China’s capital Beijing on January 13. Crowds outside the store in the Sanlitun district were waiting on queues overnight. There were incidents of scuffle between shoppers and the store’s security staff when shoppers, hundreds of them, were told that the sales [...]Source : Design You TrustExplore : iPhone, iPhone 4, Phone","http://wik.io/info/US/309201303","1326439500","","","","","","","","","wikio","http://wikio.com/favicon.ico","blogs","wik.io","2388575404943858468"
"Apple to halt sales of iPhone 4S in China (Fame Dubai Blog)","SHANGHAI – Apple Inc said on Friday it will stop selling its latest iPhone in its retail stores in Beijing and Shanghai to ensure the safety of its customers and employees. Go to SourceSource : Fame Dubai BlogExplore : iPhone, iPhone 4, Phone","http://wik.io/info/US/309198933","1326439320","","","","","","","","","wikio","http://wikio.com/favicon.ico","blogs","wik.io","16209851193593872066"
Actualización de ES6 (2016)
Utilice esta sintaxis menos densa y también JSON.stringify para agregar comillas a las cadenas mientras mantiene los números sin comillas:
const items = json3.items
const replacer = (key, value) => value === null ? '''' : value // specify how you want to handle null values here
const header = Object.keys(items[0])
let csv = items.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join('',''))
csv.unshift(header.join('',''))
csv = csv.join(''/r/n'')
console.log(csv)
Escribir Csv.
function writeToCsv(dataToWrite, callback) {
var dataToWrite;
var fs = require(''fs'');
dataToWrite = convertToCSV(dataToWrite);
fs.writeFile(''assets/distanceInfo.csv'', dataToWrite, ''utf8'', function (err) {
if (err) {
console.log(''Some error occured - file either not saved or corrupted file saved.'');
} else{
console.log(''It/'s saved!'');
}
callback("data_saved | assets/distanceInfo.csv")
});
}
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;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JSON to CSV</title>
<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
</head>
<body>
<h1>This page does nothing....</h1>
<script type="text/javascript">
var json3 = {
"count": 2,
"items": [{
"title": "Apple iPhone 4S Sale Cancelled in Beijing Amid Chaos (Design You Trust)",
"description": "Advertise here with BSA Apple cancelled its scheduled sale of iPhone 4S in one of its stores in China’s capital Beijing on January 13. Crowds outside the store in the Sanlitun district were waiting on queues overnight. There were incidents of scuffle between shoppers and the store’s security staff when shoppers, hundreds of them, were told that the sales [...]Source : Design You TrustExplore : iPhone, iPhone 4, Phone",
"link": "http://wik.io/info/US/309201303",
"timestamp": 1326439500,
"image": null,
"embed": null,
"language": null,
"user": null,
"user_image": null,
"user_link": null,
"user_id": null,
"geo": null,
"source": "wikio",
"favicon": "http://wikio.com/favicon.ico",
"type": "blogs",
"domain": "wik.io",
"id": "2388575404943858468"
},
{
"title": "Apple to halt sales of iPhone 4S in China (Fame Dubai Blog)",
"description": "SHANGHAI – Apple Inc said on Friday it will stop selling its latest iPhone in its retail stores in Beijing and Shanghai to ensure the safety of its customers and employees. Go to SourceSource : Fame Dubai BlogExplore : iPhone, iPhone 4, Phone",
"link": "http://wik.io/info/US/309198933",
"timestamp": 1326439320,
"image": null,
"embed": null,
"language": null,
"user": null,
"user_image": null,
"user_link": null,
"user_id": null,
"geo": null,
"source": "wikio",
"favicon": "http://wikio.com/favicon.ico",
"type": "blogs",
"domain": "wik.io",
"id": "16209851193593872066"
}
]
};
const items = json3.items
const replacer = (key, value) => value === null ? '''' : value // specify how you want to handle null values here
const header = Object.keys(items[0])
let csv = items.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join('',''))
csv.unshift(header.join('',''))
csv = csv.join(''/r/n'')
var link = document.createElement("a");
link.id="lnkDwnldLnk";
document.body.appendChild(link);
blob = new Blob([csv], { type: ''text/csv'' });
var csvUrl = window.webkitURL.createObjectURL(blob);
var filename = ''UserExport.csv'';
jQuery("#lnkDwnldLnk")
.attr({
''download'': filename,
''href'': csvUrl
});
jQuery(''#lnkDwnldLnk'')[0].click();
document.body.removeChild(link);
</script>
</body>
</html>