CODEWITHSUNDEEP
javascriptjsongoogle-sheetsgoogle-visualizationgoogle-sheets-api
Saravana Kumar
Saravana Kumar

Reputation: 179

Error While Inserting json data into Google SpreadSheet

Am trying to Inserting JSON data's into Google Spreadsheet. This is My code , 

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script>
var read=(function(){

data1={
        "jobstatus": [
                      {
                          "dateAndTime": "hi",
                          "jobId": "TCC_tfc",
                          "userId": "admin",
                          "status": "Completed",
                          "jobType": "Excel Upload"
                      }
                  ]
              };
var jobs = data1;
var datae = new google.visualization.DataTable();

datae.addRows(["datetime",jobs.jobstatus.dateAndTime],
          ['jobId', jobs.jobstatus.jobId],
          ['userId', jobs.jobstatus.userId],
          ['status', jobs.jobstatus.status],
          ['jobType', jobs.jobstatus.jobType]
      );});

</script>

While am Executing this code am getting error as

TypeError: google.visualization is undefined

How can i solve that Error ? i searched solution for that in "SO" they said me to add this line :

google.load('visualization', '1.0', {'packages':['corechart'], 'callback': read});

By adding this also am getting that same error . Can someone help me out from this .

Upvotes: 1

Views: 83

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

here are a few recommendations...

1) recommend using loader.js vs. the older library jsapi

<script src="https://www.gstatic.com/charts/loader.js"></script>

2) name the callback function, rather than assigning to a variable 

google.charts.load('current', {
  callback: read,
  packages:['table']
});

function read(){...}

3) must add columns before addRows, several ways to do this, using arrayToDataTable is easy 

var datae = google.visualization.arrayToDataTable([
  ['datetime', 'jobId', 'userId', 'status', 'jobType'],
]);

4) in data1, "jobstatus" is an array, so must use array element index to access value

jobs.jobstatus[0].dateAndTime // get first array element with [0]

--or--

if there is more than one jobstatus in the array, use a loop to add them all, using addRow 

jobs.jobstatus.forEach(function (job) {
  datae.addRow([
    job.dateAndTime,
    job.jobId,
    job.userId,
    job.status,
    job.jobType
  ]);
});

see following working snippet... 

google.charts.load('current', {
  callback: read,
  packages:['table']
});

function read(){
  var data1={
    "jobstatus": [{
      "dateAndTime": "hi",
      "jobId": "TCC_tfc",
      "userId": "admin",
      "status": "Completed",
      "jobType": "Excel Upload"
    }]
  };
  var jobs = data1;

  var datae = google.visualization.arrayToDataTable([
    ['datetime', 'jobId', 'userId', 'status', 'jobType'],
  ]);

  jobs.jobstatus.forEach(function (job) {
    datae.addRow([
      job.dateAndTime,
      job.jobId,
      job.userId,
      job.status,
      job.jobType
    ]);
  });

  var chart = new google.visualization.Table(document.getElementById('chart_div'));
  chart.draw(datae);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions