JSONをCSV形式に変換して変数に格納する方法


99

ブラウザでJSONデータを開くリンクがありますが、残念ながらそれを読み取る方法がわかりません。JavaScriptを使用してこのデータをCSV形式で変換し、JavaScriptファイルに保存する方法はありますか?

データは次のようになります。

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

私が見つけた最も近いものは、MS ExcelのJSON形式をCSV形式に変換することでした。

しかし、CSVファイルでダウンロードし、変換したデータ全体を変数に保存します。

また、エスケープ文字'\u2019'を通常に戻す方法を教えてください。


私はこのコードを試しました:

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

しかし、それは機能していないようです。誰か助けてくれますか?



あなたはそこに良いコードを持っています。ダウンロードする行はwindow.open( "data:text / csv; charset = utf-8、" + escape(str))です。不要な場合はスキップしてください。csv文字列はこの変数に保持されます:str
zdrsh

CSVでは、JSONとして複数のレベルのデータ(および同様)を処理できません。JSONがどのようにCSVのように見えると思いますか?2,Apple iPhone 4S Sale Cancelled in Beijing Amid Chaos (Design You Trust), ...
ステファン

私のデータが次のように見えるようにしたい:混沌の中で北京でキャンセルされたApple iPhone 4Sの販売(Design You Trust)私はこの開始文字を簡単に削除できます: "{" count ":2、" items ":[:"
praneybehl

@zdrshはい、しかし何らかの理由でそれを機能させることができません。
praneybehl

回答:


154

jsonをcsvに変換するよりエレガントな方法は、フレームワークなしでmap関数を使用することです。

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)

出力:

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"

ES6を更新(2016)

次の密度の低い構文とJSON.stringifyを使用して、引用符を付けずに文字列に引用符を追加します。

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)

3
私はこれの簡潔さを気に入っていますが、一部の人が理想とする可能性のあるいくつかのことは処理しないことに注意してください。たとえば、独自の行の各レコード、引用符で囲まれていない数字とブール値など
scunliffe

2
fields.map()の後に+ "\ r \ n"を追加して、行ごとに1つのレコードを取得できます。引用符で囲まれていない数値を取得するには、代わりにJSON.stringify(row [fieldName])を使用できます。これは、文字列のみを引用符で囲み、数値は引用符で囲まないままにします。
Christian Landgren、2015年

1
@scunliffe:新しい例をJSON.stringifyで更新しました-あなたが説明したケースを処理するはずです。
Christian Landgren

1
@marathon、グッドキャッチ、nullのケースを個別に処理するように例を更新しました。置き換えが使用されない場合、nullは次のように出力されますnull-今の例ではnull、未定義、数値の両方を正しく処理する必要があります。
Christian Landgren、2016年

3
これは\"、Excelで表示したときに一部のフィールドが列から「飛び出す」ことができる引用符を使用して文字列をエスケープすることに注意してください(""引用符のエスケープ文字として優先されるようです)。これは、上記の私の回答で述べたように.replace(/\\"/g, '""')、末尾にを追加することで解決できますJSON.stringify(row[fieldName], replacer)
user1274820 2018年

51

はい、ようやくこのコードが機能しました。

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

すべての貢献者へのすべてのサポートに感謝します。

プラニー


1
私はこれを試しました。私は3つの列を持っていますが、Excelではすべてのものは1つの列で表示されます
Nithesh Narayanan 2012

1
Nithesh区切り文字として「、」を指定する必要があります
Jacer Omri

ここでこれを共有してくれてありがとう。ちょうどそれを使用し、それは完璧に動作します。
Ramin Arabbagheri

これをありがとう!セルにオブジェクトが含まれている場合に行に「[object Object]」が含まれないようにするために、以下を追加しました。if(_.isObject(array [i] [index])){array [i] [index] = JSON.stringify(array [i] [index]); } (アンダースコアを使用しますが、バニラに変更することができます)
クレイトロニコン2017

1
@Sunil値にカンマが含まれていると、壊れます。私のニーズのために私はこれをやっただけです:var re = new RegExp( '、'、 'g'); array [i] [index] = array [i] [index] .toString()。replace(re、 ';')
claytronicon

17

praneybehlによる非常に素晴らしい解決策ですが、誰かがデータをcsvファイルとして保存し、blobメソッドを使用したい場合は、これを参照できます:

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

このソリューションは機能しますが、奇妙な点がいくつかあります-2 var row回定義します(ifステートメントとforループでクロージャーが作成されない場合)。また、ラベル/ヘッダループは、おそらく1行に減らすことができますObject.keys(arrData[0]).join(',')
ccnokes

あなたの答えは機能しています。ただし、一部の行で一部の列が使用できない場合などは、欠落している列は考慮されず、その行データの列データは再調整されません。
SMSは

私はこのメソッドを機能させることができましたが、次のようにコードの一部を編集する必要がありました:1. JQueryなしで機能する: document.getElementById("lnkDwnldLnk").download = filename; document.getElementById("lnkDwnldLnk").href = csvUrl;2. IE11で機能する: if (window.navigator && window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveOrOpenBlob(blob, filename); } else { document.getElementById('lnkDwnldLnk').click(); }
Jason

17

JSONをCSVドキュメントにエクスポートしてダウンロードしようとしていたので、将来の人々のためにここにコードを追加したかっただけです。

$.getJSONは外部ページからjsonデータをプルするために使用していますが、基本的な配列がある場合は、それをそのまま使用できます。

これは、Christian Landgrenのコードを使用して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);
    });
});

編集:をJSON.stringify追加することで、引用符内の引用符をエスケープすることに注意してください\"。CSVをExcelで表示する場合、エスケープ文字としては好ましくありません。

.replace(/\\"/g, '""')の末尾に追加して、JSON.stringify(row[fieldName], replacer)これをExcelで適切に表示できます(これは、Excelが優先するものと置き換え\"られ""ます)。

フルライン: let csv = items.map(row => header.map(fieldName => (JSON.stringify(row[fieldName], replacer).replace(/\\"/g, '""'))).join(','));


11

誰かがそれもダウンロードしたかったら。
以下は、JSONオブジェクトの配列をcsvに変換し、それをダウンロードする素晴らしい小さな関数です。

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

次に、次のように呼び出します。

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

要素の1つに単一引用符がある場合、これは機能しないようです。たとえばCap D'antibes
MidnightDataGeek

9

標準ベースの既存の強力なライブラリを再利用するために利用できる複数のオプションがあります。

プロジェクトでD3を使用する場合は、次のコマンドを呼び出すだけです。

    d3.csv.formatまたはd3.csv.formatRows、オブジェクトの配列をcsv文字列に変換する関数。

    d3.csv.formatRows どのプロパティをcsvに変換するかをより詳細に制御できます。

d3.csv.formatおよびd3.csv.formatRows wikiページを    参照してください。

jquery-csvPapaParseなど、他にも利用可能なライブラリがあります。Papa Parseには依存関係はなく、jQueryもありません。

jqueryベースのプラグインについては、こちらを確認してください


1
これは私にとってはうまくいきました。2017.v3(現在はv4)からD3 APIが変更されていることに注意してください:github.com/d3/d3-dsv/blob/v1.2.0/README.md#csvFormat
aljabear

7

これらの例を試してください

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

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

次のコードを使用してcsvファイルをダウンロードすることもできます。

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

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>

1

新しいバージョンのjsのオブジェクト指向の方法で動的に深いオブジェクトに対してそれを行う方法がここにあります。リージョンの後にseperatortypeを変更する必要がある場合があります。

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

1

オブジェクトの長さが異なる場合があります。だから私はカイル・ペネルと同じ問題に出くわしました。ただし、配列を並べ替えるのではなく、単にその配列をトラバースし、最長のものを選択します。最初にソートするときの時間の複雑さは、O(n log(n))と比較してO(n)に削減されます。

私は、Christian Landgrenの更新されたES6(2016)バージョンのコードから始めました。

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

1

私は上記の@Christian Landgrenの答えを追い出したかったのです。CSVファイルに列/ヘッダーが3つしかなかった理由がわかりませんでした。これは、私のjsonの最初の要素に3つのキーしかなかったためです。したがって、const header = Object.keys(json[0])ラインに注意する必要があります。配列の最初の要素が代表的であると想定しています。いくつかのオブジェクトが多かれ少なかれ持っている乱雑なJSONがありました。

そこで、これにarray.sortJSONをキーの数で並べるを追加しました。こうすることで、CSVファイルの列数が最大になります。

これは、コードで使用できる関数でもあります。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)
}

1

ネストされたオブジェクトとタブ区切り記号を操作するためのpraneybehlの 回答の適応

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
}

1
これは、Excel /スプレッドシートに直接コピーして貼り付けるのに最適です。ありがとう!
UP3

0

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

2
これはあまり価値がないと思います。これが質問への回答にどのように役立っているかについての説明を追加して編集してください。
fedorqui 'SO stop harming' 2017

0

ここで面白いことは何も完了せず、機能しません(IEもnode.jsも)。同様の質問に答えてください。少し構造化されたJSON(もう一度コピーする必要がないと想定)、デモスニペットも含まれています。 JSONからCSVへの変換(JavaScript):CSV変換を適切にフォーマットする方法 単一タイプのコンバーターだけでなく、Github(プロファイルで説明)でも、不明なJSON構造を分析するために使用することを期待しています。私はこの回答のコードとGithubのすべてのコードの作成者です(fork / + translationとして開始された一部のプロジェクトを除く)。


0

個人的には、d3-dsvライブラリーを使用してこれを行います。なぜ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);
}

ツリー揺れあなただけから、その特定の機能をインポートすることができd3-dsvライブラリ


0

オブジェクトの配列をCSVに変換する簡単なバージョンを次に示します(これらのオブジェクトはすべて同じ属性を共有していると想定しています)。

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') 
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.