<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <title>Demo - Covnert JSON to CSV</title>
    <script type="text/javascript" src="https://github.com/douglascrockford/JSON-js/raw/master/json2.js"></script>
  </head>

  <body>
    <button id="generate">Generate JSON</button>
<button id="convert">Convert to CSV</button>

<div id="json">
    
</div>

<div id="csv">
</div>
  </body>

</html>
 // Code goes here
        // JSON to CSV Converter
        function ConvertToCSV(objArray) {
            var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
            console.log(array[0]);
            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 = [];

            $('#generate').on('click',function(){

                for(var i =0;i<22000;i++)
                {
                    // items.push({name:"Item:"+i,color:"Green",size:"X-Large"});
                    items.push({ name: "Item 1", color: "Green", size: "X-Large" });
                }
                alert('22000 lines of Json Generated, Click Convert');
                // console.log(items);
                // $('#json').text(JSON.stringify(items));

            });

            $('#convert').on('click',function(){

CSV = ConvertToCSV(items);
                // $('#csv').append(ConvertToCSV(items));
var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);


        var link = document.createElement("a");
        link.href = uri;
        // link.style = "visibility:hidden";
        link.download = 'Hello' + ".csv";
        // link.text = 'Download';
console.log(link);

        $('body').append(link);
        // link.click();
        // document.body.removeChild(link);
        $('a').append('Download');
            });
            // 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
        
        });
/* Styles go here */