Cannot download .json file from CSV to JSON Conversion and Cannot convert JSON to CSV

Question

My algorithm for converting CSV to JSON data works but when I click "Download JSON" it gives me a CSV file. Does anyone know what the issue is?

Also, the "convert to CSV" button is not outputting anything!

You don't need to pay attention to the Highcharts code even though I included it.

Does anyone know how to fix this? The code is here (some of the code belongs to Sturtevant from JSFiddle. Credits to him):

function CSVToArray(strData, strDelimiter) {
    // Check to see if the delimiter is defined. If not,
    // then default to comma.
    strDelimiter = (strDelimiter || ",");
    // Create a regular expression to parse the CSV values.
    var objPattern = new RegExp((
    // Delimiters.
    "(\\" + strDelimiter + "|\\r?\\n|\\r|^)" +
    // Quoted fields.
    "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +
    // Standard fields.
    "([^\"\\" + strDelimiter + "\\r\\n]*))"), "gi");
    // Create an array to hold our data. Give the array
    // a default empty first row.
    var arrData = [[]];
    // Create an array to hold our individual pattern
    // matching groups.
    var arrMatches = null;
    // Keep looping over the regular expression matches
    // until we can no longer find a match.
    while (arrMatches = objPattern.exec(strData)) {
        // Get the delimiter that was found.
        var strMatchedDelimiter = arrMatches[1];
        // Check to see if the given delimiter has a length
        // (is not the start of string) and if it matches
        // field delimiter. If id does not, then we know
        // that this delimiter is a row delimiter.
        if (strMatchedDelimiter.length && (strMatchedDelimiter != strDelimiter)) {
            // Since we have reached a new row of data,
            // add an empty row to our data array.
            arrData.push([]);
        }
        // Now that we have our delimiter out of the way,
        // let's check to see which kind of value we
        // captured (quoted or unquoted).
        if (arrMatches[2]) {
            // We found a quoted value. When we capture
            // this value, unescape any double quotes.
            var strMatchedValue = arrMatches[2].replace(
            new RegExp("\"\"", "g"), "\"");
        } else {
            // We found a non-quoted value.
            var strMatchedValue = arrMatches[3];
        }
        // Now that we have our value string, let's add
        // it to the data array.
        arrData[arrData.length - 1].push(strMatchedValue);
    }
    // Return the parsed data.
    return (arrData);
}

function CSV2JSON(csv) {
    var array = CSVToArray(csv);
    var objArray = [];
    for (var i = 1; i < array.length; i++) {
        objArray[i - 1] = {};
        for (var k = 0; k < array[0].length && k < array[i].length; k++) {
            var key = array[0][k];
            objArray[i - 1][key] = array[i][k]
        }
    }

    var json = JSON.stringify(objArray);
    var str = json.replace(/},/g, "},\r\n");

    return str;
}

$("#convert").click(function() {
    var csv = $("#csv").val();
    var json = CSV2JSON(csv);
    $("#json").val(json);
});

$("#download").click(function() {
    var csv = $("#csv").val();
    var json = CSV2JSON(csv);
    window.open("data:text/json;charset=utf-8," + escape(json))
});



function JSON2CSV(objArray) {
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;

    var str = '';
    var line = '';

    if ($("#labels").is(':checked')) {
        var head = array[0];
        if ($("#quote").is(':checked')) {
            for (var index in array[0]) {
                var value = index + "";
                line += '"' + value.replace(/"/g, '""') + '",';
            }
        } else {
            for (var index in array[0]) {
                line += index + ',';
            }
        }

        line = line.slice(0, -1);
        str += line + '\r\n';
    }

    for (var i = 0; i < array.length; i++) {
        var line = '';

        if ($("#quote").is(':checked')) {
            for (var index in array[i]) {
                var value = array[i][index] + "";
                line += '"' + value.replace(/"/g, '""') + '",';
            }
        } else {
            for (var index in array[i]) {
                line += array[i][index] + ',';
            }
        }

        line = line.slice(0, -1);
        str += line + '\r\n';
    }
    return str;
    
}
        
$("#convert").click(function() {
    var json = $.parseJSON($("#json").val());
    var csv = JSON2CSV(json);
    $("#csv").val(csv);
});
    
$("#download").click(function() {
    var json = $.parseJSON($("#json").val());
    var csv = JSON2CSV(json);
    window.open("data:text/csv;charset=utf-8," + escape(csv))
});



var myJson = [{"category":1,"guestValue":0,"visits":23},{"category":2,"guestValue":96.6,"visits":45},{"category":3,"guestValue":73.2,"visits":65},{"category":4,"guestValue":60.3,"visits":85},{"category":5,"guestValue":52.5,"visits":105},{"category":6,"guestValue":46.6,"visits":125},{"category":7,"guestValue":41.4,"visits":144},{"category":8,"guestValue":37.5,"visits":163},{"category":9,"guestValue":34.4,"visits":179},{"category":10,"guestValue":31.9,"visits":199},{"category":"11-17","guestValue":25.4,"visits":258},{"category":"18-28","guestValue":17,"visits":394},{"category":"29+","guestValue":9.7,"visits":847}];


var category = [];
var guestValue = [];
var visits = [];

for (i=0; i < myJson.length; i++) {

  guestValue.push(myJson[i].guestValue);
  
  visits.push(myJson[i].visits);
  
  category.push(myJson[i].category);
}


Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
 
  title: {
    text: null,
    align: 'center',
    verticalAlign: 'bottom',
  },
  xAxis: {
    categories: category,

    title: {
      text: 'Visits Per Customer (TTM)'
    },
  },
  yAxis: {
    min: 0,
    gridLineWidth: 0,
   minorGridLineWidth: 0,     
    
    title: {
      text: 'Average Return Rate Overall: 64 Days',
      y: 10
    },
    
    labels: {
      overflow: 'justify'
      
    }
  },
  
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.0f} </b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true,
      }
    }
  },
  legend: {
  
    layout: 'horizontal',
    align: 'right',
    verticalAlign: 'top',
    x: -25,
    y: 5,
    width: 280,
    floating: true,
    borderWidth: 1,
    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
   
    shadow: true
    
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Q1 / 18 (TTM) Annual Guest Value',
    data: guestValue,
    color: 'grey',
    // label color
    dataLabels: {
      style: {
        color: 'grey'
       
      }
    }
  }, {
    name: 'Days Between 1st and 2nd Visits',
    data: visits,
    color: 'green',
    // label color
    dataLabels: {
      style: {
        color: 'green'
      }
    }
  }]
});

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>


 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
        <!--alasql library-->
        <script src="https://cdn.jsdelivr.net/alasql/0.3/alasql.min.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

<script>

angular.module('app', []).controller('downloader', function($scope) {
                // json data to be exported
                
           $scope.data = [{"category":1,"guestValue":0,"visits":23},{"category":2,"guestValue":96.6,"visits":45},{"category":3,"guestValue":73.2,"visits":65},{"category":4,"guestValue":60.3,"visits":85},{"category":5,"guestValue":52.5,"visits":105},{"category":6,"guestValue":46.6,"visits":125},{"category":7,"guestValue":41.4,"visits":144},{"category":8,"guestValue":37.5,"visits":163},{"category":9,"guestValue":34.4,"visits":179},{"category":10,"guestValue":31.9,"visits":199},{"category":"11-17","guestValue":25.4,"visits":258},{"category":"18-28","guestValue":17,"visits":394},{"category":"29+","guestValue":9.7,"visits":847}];
                
                
               
                
                $scope.downloadReports = function() {   // we can download our json data in many formats. ex: csv, excel
                   // var filename = "someFileName.xlsx"
                    var filename = "RawData.csv"
                    //alasql('SELECT id as ID,name as Name INTO XLSX("' + filename + '",{headers:true}) FROM ?', [$scope.OrganizationUsersList]);
                    alasql('SELECT * INTO CSV("' + filename + '",{headers:true}) FROM ?', [$scope.data]);
                };
                
                
                $scope.downloadReports_xlsx = function() {
                
                
                  var filename = "RawData.xlsx"
                   // alasql('SELECT * INTO XLSML("RawData.xls",?) FROM ?',[$scope.data]);
                    alasql('SELECT * INTO XLSX("' + filename + '",{headers:true}) FROM ?', [$scope.data]);
                
                  
                
                };
                
            });

</script>

 </head>

<body ng-app="app" ng-controller="downloader">

 <div style="float: left">
 
 <button class="btn  btn-xs btn-white" ng-click="downloadReports()">Download CSV Report</button>
 <button class="btn  btn-xs btn-white" ng-click="downloadReports_xlsx()">Download Excel Report</button>
 
 <p id="heading">CSV to JSON Converter</p>
    <p class="small"><a href="http://jsfiddle.net/sturtevant/vUnF9/" target="_blank">JSON to CSV Converter</a>
    <hr />
    <p>Paste Your CSV Here:</p>
    <textarea id="csv" class="text">"Id","UserName"
"1","Sam Smith"
"2","Fred Frankly"
"1","Zachary Zupers"</textarea>
    <br />
    <button id="convert">Convert to JSON</button>
    &nbsp;&nbsp;
    <button id="download">Download JSON</button>
    <textarea id="json" class="text"></textarea>
    <p>Based on code posted <a href="http://www.bennadel.com/blog/1504-Ask-Ben-Parsing-CSV-Strings-With-Javascript-Exec-Regular-Expression-Command.htm" target="_blank">here on Ben Nadel's blog</a></p>
 
</div>
</body>


<body ng-app="app" ng-controller="downloader">

 <div style="float: left">

    <p id="heading">JSON to CSV Converter</p>
    <p class="small"><a href="http://jsfiddle.net/sturtevant/AZFvQ/" target="_blank">CSV to JSON Converter</a>
    <hr />
    <p>Paste Your JSON Here:</p>
    <textarea id="json" class="text">[{"Id":1,"UserName":"Sam Smith"},
{"Id":2,"UserName":"Fred Frankly"},
{"Id":1,"UserName":"Zachary Zupers"}]</textarea>
    <br />
    <input id="quote" type="checkbox" checked="true" /> Wrap values in double quotes
    <br />
    <input id="labels" type="checkbox" checked="true" /> Include labels in first row
    <br />
    <button id="convert">Convert to CSV</button>
    &nbsp;&nbsp;
    <button id="download">Download CSV</button>
    <textarea id="csv" class="text"></textarea>
    <p>Based on code posted <a href="http://stackoverflow.com/a/4130939/317" target="_blank">here on StackOverflow</a></p>

</div>
</body>

</html>

Not really any errors. It just does not output the right thing or nothing happens. I am using JSFiddle — javacash, Aug 28 '18 at 23:07

score 1 · Accepted Answer · answered Aug 29 '18 at 17:31

1

When I click "Download JSON" it gives me a CSV file

<button id="download">Download JSON</button>

...

$("#download").click(function() {
    var json = $.parseJSON($("#json").val());
    var csv = JSON2CSV(json);
    window.open("data:text/csv;charset=utf-8," + escape(csv))
});

Looks like that's what you asked it to do...

answered Aug 29 '18 at 17:31

miken32

35,483
13
81
108

I am using the same code but while downloading it doesnt display extension of the file. How do i get the extension to show up? – Syfer Dec 04 '19 at 23:03

Cannot download .json file from CSV to JSON Conversion and Cannot convert JSON to CSV

1 Answers1