How to convert JSON to CSV format and store in a variable

前端 未结 16 2117
一整个雨季
一整个雨季 2020-11-22 17:31

I have a link that opens up JSON data in the browser, but unfortunately I have no clue how to read it. Is there a way to convert this data using JavaScript in CSV format and

相关标签:
16条回答
  • 2020-11-22 17:38

    Personally I would use d3-dsv library to do this. Why to 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);
    }
    

    With tree-shaking you can just import that particular function from d3-dsv library

    0 讨论(0)
  • 2020-11-22 17:39

    Write 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;
    }
    
    0 讨论(0)
  • 2020-11-22 17:40

    If anyone wanted to download it as well.
    Here is an awesome little function that will convert an array of JSON objects to csv, then download it.

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

    Then call it like this:

    this.downloadCSVFromJson(`myCustomName.csv`, this.state.csvArrayOfJson)
    
    0 讨论(0)
  • 2020-11-22 17:41

    Ok I finally got this code working:

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

    Thanks alot for all the support to all the contributors.

    Praney

    0 讨论(0)
  • 2020-11-22 17:42

    Funny nothing complete nor working here (IE nor node.js). Answer on similar question, a bit structured JSON (suppose no need to copy it again), also demo snippet included. JSON To CSV conversion (JavaScript) : How to properly format CSV conversion Hope not only single type convertor, also on my Github (mentioned in profile) is similar used to analyze unknow JSON structure. I am author of code in this answer and all code on my Github (except some projects started as fork/+translation).

    0 讨论(0)
  • 2020-11-22 17:43

    I wanted to riff off @Christian Landgren's answer above. I was confused why my CSV file only had 3 columns/headers. This was because the first element in my json only had 3 keys. So you need to be careful with the const header = Object.keys(json[0]) line. It's assuming that the first element in the array is representative. I had messy JSON that with some objects having more or less.

    So I added an array.sort to this which will order the JSON by number of keys. So that way your CSV file will have the max number of columns.

    This is also a function that you can use in your code. Just feed it 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)
    }
    
    0 讨论(0)
提交回复
热议问题