在多个数组中循环JS对象数据

Question

我在谷歌电子表格中有一些数据，我正在用Tabletop.js提取这些数据。我还可以在showInfo()函数中显示我的数据。一切都很好。

现在我尝试实现在默认的Google Chart中显示这些数据。在这种情况下，我使用他们的地图包在地图上显示我的数据。他们给我提供了一些示例代码，see here。

目前，我正在为下面的函数而苦苦挣扎，整个my Fiddle代码

mapdata.addRows([
    // PREFERRED DATA TO COLLECT:
    // [data.geoloc, data.GM_NAAM, 'blue' ],
    // THE HARDCODED WAY:
    ['Kerkbrink 2 ANLOO', 'ANLOO', 'green'],
    ['Grote Kerkstraat 32 WIJK EN AALBURG', 'WIJK EN AALBURG',  'blue']
  ]);

我该怎么做呢？我设法在showInfo函数中使用forEach显示所有数据，但这在此数组中不起作用。

我是JS-land的新手，所以我很感谢大家对我的帮助。提前感谢！

Answer 1

请查找更新后的fiddle here

这就是你要找的东西吗？

更新的js代码：

/* 1: tabletop shizzle */

var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1cpSdKrQK0DfRoC9_xgmAqwVaDqw8BKMOL7drA_QFIn0/edit?usp=sharing';

function init() {
  Tabletop.init( { key: publicSpreadsheetUrl,
                   callback: showInfo,
                   simpleSheet: true } )
}

function showInfo(data, tabletop) {
 alert('Successfully processed!')

  var chartdiv = document.querySelector(".chart_div");
  console.log("data: ", data);
  data.forEach( function(data) {

    // card
    var card = document.createElement('div');
    card.classList.add("card");

    //content
    var content = document.createElement('div');
    content.classList.add('content');
    content.innerHTML = data.GM_NAAM + ' ' + data.geoloc;

    // append
    chartdiv.appendChild(card);
    card.appendChild(content);
  });
// trigger the google charts drapMap function and send the data to it
    drawMap(data);
}
window.addEventListener('DOMContentLoaded', init);



/* 2: google chart shizzle */

google.charts.load('current', {
  'packages': ['map'],
  // DEFAULT GOOGLE API KEY
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawMap);

function drawMap(data) {

  var mapdata = new google.visualization.DataTable();
  mapdata.addColumn('string', 'Address');
  mapdata.addColumn('string', 'Location');
  mapdata.addColumn('string', 'Marker')

  console.log(data);
  data = data ? data : [];
  var rows = [];
  data.forEach(function(item){
    rows.push([item.GM_NAAM, item.geoloc, 'green'])
  })
  // THIS IS THE PART I NEED THE DATA.
  mapdata.addRows(rows);


  // SOME OPTIONS
  var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';

  var options = {
    zoomLevel: 7,
    showTooltip: true,
    showInfoWindow: true,
    useMapTypeControl: true,
    icons: {
      blue: {
        normal:   url + 'Map-Marker-Ball-Azure-icon.png',
        selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
      },
      green: {
        normal:   url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
        selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
      }
    }
  };
  var map = new google.visualization.Map(document.getElementById('map_div'));

  map.draw(mapdata, options);
}