将行添加到Google数据可视化表

时间:2017-12-21 18:53:03

标签: javascript google-maps

我试图在google可视化表中添加不同的lat集,通过迭代Ajax get响应,看起来只有响应json中的最后一个值被添加到行中,

使用Javascript:

$.ajax({
          type: 'GET',
          url: '/api/v1.0/tasks/'+document.getElementById("autocomplete").value,
          dataType: 'json',
          data: { 'value' : $(this).val() },
          success : function(data){

          for(var i=0; i<data.task.length; i++) {

             var lat,long,name;
             var lat = data.task[i].lat
             var longi = data.task[i].longi
              var name = data.task[i].markerText
             alert(lat,longi,name)
             var datag = new google.visualization.DataTable();
              datag.addColumn('number', 'lat');
              datag.addColumn('number', 'longi');
               datag.addColumn('string', 'markerstr');
               datag.addRows([[lat,longi,name],]);
        }

})

预期产出:

data = [[37.6153, -122.3900, 'Airport'],
                                     [37.4422, -122.1731, 'Shopping'],]

1 个答案:

答案 0 :(得分:1)

看起来每次迭代时都在重建数据结构。碰巧你的标题是相同的。但在这种情况下,每次迭代都会重写整个数据。也许尝试这样的事情。

    $.ajax({
      type: 'GET',
      url: '/api/v1.0/tasks/'+document.getElementById("autocomplete").value,
      dataType: 'json',
      data: { 'value' : $(this).val() },
      success : function(data){


      var datag = new google.visualization.DataTable();
          datag.addColumn('number', 'lat');
          datag.addColumn('number', 'longi');
          datag.addColumn('string', 'markerstr');
      var rows = []
      for(var i=0; i<data.task.length; i++) {

         var lat,long,name;
         var lat = data.task[i].lat
         var longi = data.task[i].longi
         var name = data.task[i].markerText
         rows.push([lat,longi,name]);
    }
      datag.addRows(rows);
 })