title: Parse a Google spreadsheet into a Javascript array
body: <p>I have a Google spreadsheet (<a href="https://docs.google.com/spreadsheets/d/e/2PACX-1vRc8Lx0N-wf3f1xAAXkNFUqQjaWPFcde3YjK02gCBqGpUrULwHC6NC0sndeLJBvOyKkA88hvtH335pR/pubhtml" rel="nofollow noreferrer">https://docs.google.com/spreadsheets/d/e/2PACX-1vRc8Lx0N-wf3f1xAAXkNFUqQjaWPFcde3YjK02gCBqGpUrULwHC6NC0sndeLJBvOyKkA88hvtH335pR/pubhtml</a>) which I'd like to access in a webpage to use with Google Maps API.</p>
  
  <p>As per Google API'S documentation, the script should look like this:</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-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
    &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      google.charts.load('current', { 'packages': ['map'] });
      google.charts.setOnLoadCallback(drawMap);
  
      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Population'],
          ['China', 'China: 1,363,800,000'],
          ['India', 'India: 1,242,620,000'],
          ['US', 'US: 317,842,000'],
          ['Indonesia', 'Indonesia: 247,424,598'],
          ['Brazil', 'Brazil: 201,032,714'],
          ['Pakistan', 'Pakistan: 186,134,000'],
          ['Nigeria', 'Nigeria: 173,615,000'],
          ['Bangladesh', 'Bangladesh: 152,518,015'],
          ['Russia', 'Russia: 146,019,512'],
          ['Japan', 'Japan: 127,120,000']
        ]);
  
      var options = {
        showTooltip: true,
        showInfoWindow: true
      };
  
      var map = new google.visualization.Map(document.getElementById('chart_div'));
  
      map.draw(data, options);
    };
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="chart_div"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So my goal is to dynamically replace:</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>[
          ['Country', 'Population'],
          ['China', '1,363,800,000'],
          ['India', '1,242,620,000'],
          ['US', '317,842,000'],
          ['Indonesia', '247,424,598'],
          ['Brazil', '201,032,714'],
          ['Pakistan', '186,134,000'],
          ['Nigeria', '173,615,000'],
          ['Bangladesh', '152,518,015'],
          ['Russia', 'Russia: 146,019,512'],
          ['Japan', 'Japan: 127,120,000']
  ]</code></pre>
  </div>
  </div>
  </p>
  
  <p>...with the content of the Google Spreadsheet.</p>
  
  <p>I am new at JS, and I'm struggling to properly convert an exported JSON from Google Spreadsheets into a JS array. Searching around, I stumbled upon an interresting script:</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-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
   var spData = null;
   function doData(json) {
     spData = json.feed.entry;
   }
   
   function drawCell(tr, val) {
     var td = $("&lt;td/&gt;");
     tr.append(td);
     td.append(val);
     return td;
   }
   function drawRow(table, rowData) {
     if (rowData == null) return null;
     if (rowData.length == 0) return null;
     var tr = $("&lt;tr/&gt;");
     table.append(tr);
     for(var c=0; c&lt;rowData.length; c++) {
      drawCell(tr, rowData[c]);
     }
     return tr;
   }
   
   function drawTable(parent) {
     var table = $("&lt;table/&gt;");
     parent.append(table);
     //console.log(table);
     return table;
   }
   
   function readData(parent) {
     var data = spData;
     var table = drawTable(parent);
     var rowData = [];
     
     for(var r=0; r&lt;data.length; r++) {
       var cell = data[r]["gs$cell"];
       var val = cell["$t"];
       if (cell.col == 1) {
         drawRow(table, rowData);
         rowData = [];
       }
       rowData.push(val);
     }
     drawRow(table, rowData);
   }
   
   $(document).ready(function(){
     readData($("#data"));
   });
   
   
   &lt;/script&gt;
  
  &lt;script src="https://spreadsheets.google.com/feeds/cells/1TTeG6mp2rb61Yxi5KO3GFmZ3qQ3RAMlB9bisLciuj-M/1/public/values?alt=json-in-script&amp;callback=doData"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
   table {border-collapse: collapse; width: 100%;}
   th, td {border: thin solid black; padding: 3px;}
   tr.head th, tr.head td {background-color: #EDEDED; border-bottom: 4px double black;}
   span.linetitle {font-weight: bold;}
   div.lineclass {font-style: italic;}
   .title, .result {width: 80%;}
   .notes {width: 15%;}
   h1 {text-align: center;}
   body {margin: 12px; font-size: 12px;}
  &lt;/style&gt;
  &lt;style type="text/css" media="print"&gt;
   form {display: none;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;Parse Google Spreadsheet with JavaScript&lt;/h1&gt; 
  &lt;div id="data"/&gt;
  &lt;/body&gt;
  &lt;/html&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>...which fetches the spreadsheet, and turns it into a HTML table. However, I can't seem to find a way to build an array from this.</p>
  
  <p>After this long context, here's my question: how can I fetch the Google spreadsheet to insert it as data in the drawMap function above?</p>