title: Js array to CSV add column headings
body: <p>Here is the code which generates a <code>CSV</code> from array, Hard coded values gives proper column Headings and data in rows. I am adding data using a loop but unable to understand how do I add column headings.</p>
  <p>Here is the hard coded array to export csv</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var Results = [
    ["Col1", "Col2", "Col3", "Col4"],
    ["Data", 50, 100, 500],
    ["Data", -100, 20, 100],
  ];
  
  exportToCsv = function() {
    var CsvString = "";
    Results.forEach(function(RowItem, RowIndex) {
      RowItem.forEach(function(ColItem, ColIndex) {
        CsvString += ColItem + ',';
      });
      CsvString += "\r\n";
    });
    CsvString = "data:application/csv," + encodeURIComponent(CsvString);
   var x = document.createElement("A");
   x.setAttribute("href", CsvString );
   x.setAttribute("download","somedata.csv");
   document.body.appendChild(x);
   x.click();
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="exportToCsv()"&gt;export to CSV&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Excel looks like this
  <a href="https://i.stack.imgur.com/sbc1U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sbc1U.png" alt="enter image description here" /></a></p>
  <p>How do I manage <strong>col1 , col2 , col3</strong> when I am inserting row values using a loop like this -</p>
  <pre><code>  for(let i=0;i&lt;this.goalList.length;i++)
    {
      console.log(i,this.goalList)
    var Result = [
      [this.goalList[i]['name'],this.goalList[i]['desc'], this.goalList[i]['phno']]
    ];
    
    Results.push(Result);
  }  
  </code></pre>