複数の配列でループするJSオブジェクトデータ

Question

私はTabletop.jsを使用しているGoogleスプレッドシートにデータがあります。私は自分のデータを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の土地ではかなり新しいので、これを達成するためのあらゆる助けに感謝します。 ありがとうございます！

Answer 1

これはあなたが探しているもので、更新フィドル​​

見つけてください！

/* 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); 
}