So konvertieren Sie JSON in das CSV-Format und speichern es in einer Variablen

95

Ich habe einen Link, der JSON-Daten im Browser öffnet, aber leider habe ich keine Ahnung, wie ich sie lesen soll. Gibt es eine Möglichkeit, diese Daten mit JavaScript im CSV-Format zu konvertieren und in einer JavaScript-Datei zu speichern?

Die Daten sehen aus wie:

{
  "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"
  }]
}

Das nächste, das ich finden konnte, war: Konvertieren Sie das JSON-Format in das CSV-Format für MS Excel

Aber es wird in einer CSV-Datei heruntergeladen, ich speichere es in einer Variablen, die gesamten konvertierten Daten.

Möchte auch wissen, wie man Escape-Zeichen ändert: '\u2019'wieder normal.

Ich habe diesen Code ausprobiert:

<!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>

Aber es scheint nicht zu funktionieren. Kann mir bitte jemand helfen?

javascript json csv praneybehl
quelle

Was ist mit zachhunter.com/2011/06/json-to-csv ?

ldiqual

Sie haben dort einen guten Code. Die Zeile, die heruntergeladen wird, ist window.open ("data: text / csv; charset = utf-8" + Escape (str)). Überspringen Sie sie einfach, wenn Sie sie nicht benötigen. und die CSV-Zeichenfolge wird in dieser Variablen gehalten: str

zdrsh

CSV kann (auch) nicht mehrere Datenebenen verarbeiten wie JSON. Wie würden Sie erwarten, dass Ihr JSON als CSV aussieht? 2,Apple iPhone 4S Sale Cancelled in Beijing Amid Chaos (Design You Trust), ...?

Stefan

Ich möchte, dass meine Daten wie folgt aussehen: Apple iPhone 4S-Verkauf in Peking abgesagt Inmitten des Chaos (Design You Trust), hier mit BSA werben Apple hat den geplanten Verkauf des iPhone 4S in einem seiner Geschäfte abgesagt. ,,,,,, etc. Ich kann diese Startzeichen leicht entfernen: "{" count ": 2," items ": [:"

praneybehl

@zdrsh ja, aber aus irgendeinem Grund kann ich es nicht zum Laufen bringen.

Praneybehl

150

Eine elegantere Möglichkeit, json in csv zu konvertieren, besteht darin, die Kartenfunktion ohne Framework zu verwenden:

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
 csv = csv.join('\r\n');
console.log(csv)

Ausgabe:

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"

Update ES6 (2016)

Verwenden Sie diese weniger dichte Syntax und auch JSON.stringify, um Zeichenfolgen in Anführungszeichen zu setzen, während Zahlen ohne Anführungszeichen bleiben:

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)

Christian Landgren
quelle

3

Ich mag die Knappheit davon, aber es sollte beachtet werden, dass es nicht ein paar Dinge behandelt, die manche für ideal halten. zB jeder Datensatz in seiner eigenen Zeile, Zahlen und Boolesche Werte bleiben unzitiert usw.

scunliffe

2

Sie können nach fields.map () ein + "\ r \ n" hinzufügen, um einen Datensatz pro Zeile zu erhalten. Um Zahlen ohne Anführungszeichen zu erhalten, können Sie stattdessen JSON.stringify (row [fieldName]) verwenden, das nur Zeichenfolgen zitiert und Zahlen ohne Anführungszeichen lässt.

Christian Landgren

1

@scunliffe: Ich habe ein neues Beispiel mit JSON.stringify aktualisiert - es sollte die von Ihnen beschriebenen Fälle behandeln.

Christian Landgren

1

@marathon, Good catch, hat das Beispiel mit einem Ersatz aktualisiert, um Nullfälle separat zu behandeln. Wenn kein Ersetzer verwendet wird, wird null ausgegeben als null- jetzt sollten die Beispiele sowohl null als auch undefiniert und Zahlen korrekt behandeln.

Christian Landgren

3

Es ist erwähnenswert, dass dies Zeichenfolgen in Anführungszeichen entgeht, mit \"denen einige Felder aus ihrer Spalte "herausspringen" können, wenn sie in Excel angezeigt werden (was ""als Escape-Zeichen für Anführungszeichen zu bevorzugen scheint ). Dies kann gelöst werden, indem .replace(/\\"/g, '""')am Ende von hinzugefügt wird , JSON.stringify(row[fieldName], replacer)wie ich in meiner obigen Antwort angegeben habe.

user1274820

51

Ok, ich habe endlich diesen Code zum Laufen gebracht:

<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>

Vielen Dank für die Unterstützung aller Mitwirkenden.

Praney

praneybehl
quelle

1

Ich habe es versucht. Ich habe drei Spalten, aber in Excel werden alle Dinge in einer einzigen Spalte kommen

Nithesh Narayanan

1

Nithesh sollten Sie ',' als Trennzeichen angeben

Jacer Omri

Vielen Dank, dass Sie dies hier teilen. Ich habe es gerade benutzt und es funktioniert perfekt.

Ramin Arabbagheri

Danke dafür! Ich habe Folgendes hinzugefügt, um zu vermeiden, dass "[Objekt Objekt]" in der Zeile steht, wenn eine Zelle ein Objekt enthält. if (_.isObject (Array [i] [Index])) {Array [i] [Index] = JSON.stringify (Array [i] [Index]); }. (verwendet Unterstrich, aber Sie könnten zu Vanille wechseln)

Claytronicon

1

@ Sunil Ich fand, wenn die Werte Kommas enthalten, bricht es. Für meine Bedürfnisse habe ich gerade Folgendes getan: var re = new RegExp (',', 'g'); Array [i] [Index] = Array [i] [Index] .toString (). Ersetzen (re, ';')

Claytronicon

17

Sehr schöne Lösung von praneybehl, aber wenn jemand die Daten als csvDatei speichern und eine blobMethode verwenden möchte, kann er dies verweisen:

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);
}

Samuel Joy
quelle

Diese Lösung funktioniert, hat aber einige seltsame Stellen - Sie definieren sie var rowzweimal (wenn Anweisungen und for-Schleifen keine Abschlüsse erstellen). Auch die Label / Header-Schleife könnte wahrscheinlich auf eine Zeile reduziert werden:Object.keys(arrData[0]).join(',')

ccnokes

Ihre Antwort funktioniert. In Fällen, in denen eine Spalte für eine Zeile nicht verfügbar ist, wird die fehlende Spalte nicht berücksichtigt und die Spaltendaten für diese Zeilendaten werden nicht neu ausgerichtet.

SMS

Ich konnte diese Methode zum document.getElementById("lnkDwnldLnk").download = filename; document.getElementById("lnkDwnldLnk").href = csvUrl;Laufen bringen, musste aber einen Teil des Codes bearbeiten, um: 1. ohne JQuery zu arbeiten: 2. in IE11 zu arbeiten: if (window.navigator && window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveOrOpenBlob(blob, filename); } else { document.getElementById('lnkDwnldLnk').click(); }

Jason

17

Ich wollte hier nur Code für zukünftige Benutzer hinzufügen, da ich versucht habe, JSON in ein CSV-Dokument zu exportieren und herunterzuladen.

Ich verwende $.getJSON, um JSON-Daten von einer externen Seite abzurufen, aber wenn Sie ein einfaches Array haben, können Sie das einfach verwenden.

Dies verwendet den Code von Christian Landgren, um die CSV-Daten zu erstellen.

$(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);
    });
});

Bearbeiten: Es ist erwähnenswert, dass JSON.stringifyAnführungszeichen in Anführungszeichen durch Hinzufügen vermieden werden \". Wenn Sie die CSV in Excel anzeigen, mag sie das nicht als Escape-Zeichen.

Sie können hinzufügen , .replace(/\\"/g, '""')bis zum Ende des JSON.stringify(row[fieldName], replacer)in Excel diese korrekt angezeigt werden (diese ersetzen wird \"mit ""dem ist , was Excel vorzieht).

Volle Linie: let csv = items.map(row => header.map(fieldName => (JSON.stringify(row[fieldName], replacer).replace(/\\"/g, '""'))).join(','));

user1274820
quelle

10

Wenn jemand es auch herunterladen wollte.
Hier ist eine tolle kleine Funktion, die ein Array von JSON-Objekten in CSV konvertiert und dann herunterlädt.

downloadCSVFromJson = (filename, arrayOfJson) => {
  // convert JSON to CSV
  const replacer = (key, value) => value === null ? '' : value // specify how you want to handle null values here
  const header = Object.keys(arrayOfJson[0])
  let csv = arrayOfJson.map(row => header.map(fieldName => 
  JSON.stringify(row[fieldName], replacer)).join(','))
  csv.unshift(header.join(','))
  csv = csv.join('\r\n')

  // Create link and download
  var link = document.createElement('a');
  link.setAttribute('href', 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURIComponent(csv));
  link.setAttribute('download', filename);
  link.style.visibility = 'hidden';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

Dann nenne es so:

this.downloadCSVFromJson(`myCustomName.csv`, this.state.csvArrayOfJson)

waz
quelle

Dies scheint für Dinge nicht zu funktionieren, wenn ein einzelnes Zitat in einem der Elemente enthalten ist, z. B.Cap D'antibes

MidnightDataGeek

9

Es stehen mehrere Optionen zur Verfügung, um die vorhandenen leistungsstarken Bibliotheken, die auf Standards basieren, wiederzuverwenden.

Wenn Sie D3 in Ihrem Projekt verwenden, können Sie einfach Folgendes aufrufen:

d3.csv.formatoder d3.csv.formatRowsFunktionen zum Konvertieren eines Arrays von Objekten in eine CSV-Zeichenfolge.

d3.csv.formatRows gibt Ihnen eine bessere Kontrolle darüber, welche Eigenschaften in CSV konvertiert werden.

Weitere Informationen finden Sie auf den Wiki-Seiten d3.csv.format und d3.csv.formatRows .

Es gibt auch andere Bibliotheken wie jquery-csv , PapaParse . Papa Parse hat keine Abhängigkeiten - nicht einmal jQuery.

Für jquery-basierte Plugins überprüfen Sie dies bitte .

Nagu
quelle

1

Das hat bei mir super funktioniert. Beachten Sie, dass sich die D3-API seit 2017 geändert hat. V3 (derzeit v4): github.com/d3/d3-dsv/blob/v1.2.0/README.md#csvFormat

aljabear

6

Probieren Sie diese Beispiele aus

Beispiel 1:

JsonArray = [{
    "AccountNumber": "123",
    "AccountName": "abc",
    "port": "All",
    "source": "sg-a78c04f8"

}, {
    "Account Number": "123",
    "Account Name": "abc",
    "port": 22,
    "source": "0.0.0.0/0",
}]

JsonFields = ["Account Number","Account Name","port","source"]

function JsonToCSV(){
    var csvStr = JsonFields.join(",") + "\n";

    JsonArray.forEach(element => {
        AccountNumber = element.AccountNumber;
        AccountName   = element.AccountName;
        port          = element.port
        source        = element.source

        csvStr += AccountNumber + ',' + AccountName + ','  + port + ',' + source + "\n";
        })
        return csvStr;
}

Beispiel 2:

JsonArray = [{
    "AccountNumber": "1234",
    "AccountName": "abc",
    "inbound": [{
        "port": "All",
        "source": "sg-a78c04f8"
    },
    {
        "port": 22,
        "source": "0.0.0.0/0",
    }]
}]

JsonFields = ["Account Number", "Account Name", "port", "source"]

function JsonToCSV() {
    var csvStr = JsonFields.join(",") + "\n";

    JsonArray.forEach(element => {
        AccountNumber = element.AccountNumber;
        AccountName = element.AccountName;
        
        element.inbound.forEach(inboundELe => {
            port = inboundELe.port
            source = inboundELe.source
            csvStr += AccountNumber + ',' + AccountName + ',' + port + ',' + source + "\n";
        })
    })
    return csvStr;
}

Sie können die CSV-Datei sogar mit dem folgenden Code herunterladen:

function downloadCSV(csvStr) {

    var hiddenElement = document.createElement('a');
    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvStr);
    hiddenElement.target = '_blank';
    hiddenElement.download = 'output.csv';
    hiddenElement.click();
}

YouBee
quelle

4

<!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>

agravat.in
quelle

1

Hier ist eine Möglichkeit, dies für dynamisch tiefe Objekte objektorientiert für die neueren js-Versionen zu tun. Möglicherweise müssen Sie den Separatortyp nach Region ändern.

private ConvertToCSV(objArray) {
    let rows = typeof objArray !== "object" ? JSON.parse(objArray) : objArray;
    let  header = "";
    Object.keys(rows[0]).map(pr => (header += pr + ";"));

    let str = "";
    rows.forEach(row => {
        let line = "";
        let columns =
            typeof row !== "object" ? JSON.parse(row) : Object.values(row);
        columns.forEach(column => {
            if (line !== "") {
                line += ";";
            }
            if (typeof column === "object") {
                line += JSON.stringify(column);
            }  else {
                line += column;
            }
        });
        str += line + "\r\n";
    });
    return header + "\r\n" + str;
}

Nicola Munz slimxshady
quelle

1

Manchmal haben Objekte unterschiedliche Längen. Also stieß ich auf das gleiche Problem wie Kyle Pennell. Aber anstatt das Array zu sortieren, fahren wir einfach darüber und wählen das längste aus. Die zeitliche Komplexität wird beim ersten Sortieren auf O (n) im Vergleich zu O (n log (n)) reduziert.

Ich habe mit dem Code aus Christian Landgrens aktualisierter ES6 (2016) -Version begonnen.

json2csv(json) {
    // you can skip this step if your input is a proper array anyways:
    const simpleArray = JSON.parse(json)
    // in array look for the object with most keys to use as header
    const header = simpleArray.map((x) => Object.keys(x))
      .reduce((acc, cur) => (acc.length > cur.length ? acc : cur), []);

    // specify how you want to handle null values here
    const replacer = (key, value) => (
      value === undefined || value === null ? '' : value);
    let csv = simpleArray.map((row) => header.map(
      (fieldName) => JSON.stringify(row[fieldName], replacer)).join(','));
    csv = [header.join(','), ...csv];
    return csv.join('\r\n');
}

ctholho
quelle

1

Ich wollte die Antwort von @Christian Landgren oben riffeln. Ich war verwirrt, warum meine CSV-Datei nur 3 Spalten / Header hatte. Dies lag daran, dass das erste Element in meinem JSON nur 3 Schlüssel hatte. Sie müssen also vorsichtig mit der const header = Object.keys(json[0])Leitung sein. Es wird davon ausgegangen, dass das erste Element im Array repräsentativ ist. Ich hatte chaotisch JSON, dass mit einigen Objekten mehr oder weniger.

Also habe ich eine hinzugefügt array.sort, die den JSON nach Anzahl der Schlüssel ordnet. Auf diese Weise hat Ihre CSV-Datei die maximale Anzahl von Spalten.

Dies ist auch eine Funktion, die Sie in Ihrem Code verwenden können. Füttere es einfach JSON!

function convertJSONtocsv(json) {
    if (json.length === 0) {
        return;
    }

    json.sort(function(a,b){ 
       return Object.keys(b).length - Object.keys(a).length;
    });

    const replacer = (key, value) => value === null ? '' : value // specify how you want to handle null values here
    const header = Object.keys(json[0])
    let csv = json.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','))
    csv.unshift(header.join(','))
    csv = csv.join('\r\n')

    fs.writeFileSync('awesome.csv', csv)
}

Kyle Pennell
quelle

1

Eine Anpassung von praneybehl Antwort an die Arbeit mit verschachtelten Objekten und Tabulatortrennzeichen

function ConvertToCSV(objArray) {
  let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
  if(!Array.isArray(array))
      array = [array];

  let str = '';

  for (let i = 0; i < array.length; i++) {
    let line = '';
    for (let index in array[i]) {
      if (line != '') line += ','

      const item = array[i][index];
      line += (typeof item === 'object' && item !== null ? ConvertToCSV(item) : item);
    }
    str += line + '\r\n';
  }

  do{
      str = str.replace(',','\t').replace('\t\t', '\t');
  }while(str.includes(',') || str.includes('\t\t'));

  return str.replace(/(\r\n|\n|\r)/gm, ""); //removing line breaks: https://stackoverflow.com/a/10805198/4508758
}

DigaoParceiro
quelle

1

Dies funktioniert perfekt zum Kopieren und Einfügen direkt in Excel / Sheets! Vielen Dank!

UP3

0

Schreiben Sie 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;
}

Ashish Gupta
quelle

2

Ich denke nicht, dass dies viel Wert hat. Bitte bearbeiten Sie , um einige Erklärungen hinzuzufügen, wie dies zur Beantwortung der Frage beiträgt.

Fedorqui 'SO hör auf zu schaden'

0

Komisch, dass hier nichts vollständig ist oder funktioniert (IE oder node.js). Antwort auf eine ähnliche Frage, ein bisschen strukturiertes JSON (vermutlich muss es nicht erneut kopiert werden), auch Demo-Snippet enthalten. JSON-zu-CSV-Konvertierung (JavaScript): So formatieren Sie die CSV-Konvertierung richtig Hoffen Sie, dass nicht nur ein Konverter vom Einzeltyp, sondern auch mein Github (im Profil erwähnt) zur Analyse unbekannter JSON-Strukturen verwendet wird. Ich bin Autor des Codes in dieser Antwort und des gesamten Codes auf meinem Github (mit Ausnahme einiger Projekte, die als Fork / + -Übersetzung gestartet wurden).

Tom
quelle

0

Persönlich würde ich dazu die d3-dsv- Bibliothek verwenden. Warum reinvent the wheel?


import { csvFormat } from 'd3-dsv';
/**
 * Based on input data convert it to csv formatted string
 * @param (Array) columnsToBeIncluded array of column names (strings)
 *                which needs to be included in the formated csv
 * @param {Array} input array of object which need to be transformed to string
 */
export function convertDataToCSVFormatString(input, columnsToBeIncluded = []) {
  if (columnsToBeIncluded.length === 0) {
    return csvFormat(input);
  }
  return csvFormat(input, columnsToBeIncluded);
}

Mit Tree-Shaking können Sie diese bestimmte Funktion einfach aus der d3-dsvBibliothek importieren

Anuj
quelle

0

Hier ist meine einfache Version des Konvertierens eines Arrays von Objekten in CSV (vorausgesetzt, diese Objekte haben alle dieselben Attribute):

var csv = []
if (items.length) {
  var keys = Object.keys(items[0])
  csv.push(keys.join(','))
  items.forEach(item => {
    let vals = keys.map(key => item[key] || '')
    csv.push(vals.join(','))
  })
}

csv = csv.join('\n')

Nimrod
quelle

So konvertieren Sie JSON in das CSV-Format und speichern es in einer Variablen

Antworten:

Update ES6 (2016)