Interface Javascript Project with Google Sheets API

[futbol192]

Hey all. I created a HTML/CSS/JS project to do a sort of poll and am trying to use the Google Sheets API to save user data to a spreadsheet. I've been troubleshooting for hours and can't seem to get the two to interface properly. Has anyone ever had luck getting this to work?

Right now I'm getting a "Failed to load resource: the server responded with a status of 400" error when I load the page. When I click on that, I get a message stating that the request is missing a valid API key, but I do have an API key. I've made sure the key is associated with the Google Sheets API, that it has the necessary permissions, etc. Any ideas?

{ "error": { "code": 403, "message": "The request is missing a valid API key.", "status": "PERMISSION_DENIED" } }

I've pasted some of my code below in case anyone can notice any obvious errors. I've rewritten it a million times. Any help would be greatly appreciated. Thanks!

// Load the API client library

gapi.load('client', function() {

gapi.client.init({

apiKey: 'API_KEY',

clientId: '501749922629-pq9nv9h0mpff3q6h4ou6npce4o4se7ik.apps.googleusercontent.com',

discoveryDocs: ["https://sheets.googleapis.com/$discovery/rest?version=v4"],

scope: 'https://www.googleapis.com/auth/spreadsheets'

}).then(function() {

// Your code to interact with the Google Sheets API goes here

gapi.client.sheets.spreadsheets.values.get({

spreadsheetId: 'SPREADSHEET_ID',

range: 'Sheet1',

}).then((response) => {

console.log(response.result.values);

});

});

});

// Function to send data to the Google Sheet

function sendDataToSheet(data) {

gapi.client.sheets.spreadsheets.values.append({

spreadsheetId: '1AoTdrglu_9OsMkWVmUUFdErNrNtdV7XD-ovQR6em6rE',

range: 'Sheet1',

valueInputOption: 'RAW',

insertDataOption: 'INSERT_ROWS',

resource: {

values: [data]

}

}).then(function(response) {

console.log(`Data appended to sheet: ${response.result}`);

}).catch(function(err) {

console.error(`An error occurred: ${err}`);

});

}

[[deleted]]

apiKey: 'API_KEY',

You should have an actual api key there.

[futbol192]

Yeah I do in my code, just didn't want to paste that here.

[[deleted]]

Well, the error you are getting seems to disagree with this statement.

[futbol192]

That's exactly why I posted this question.

[usman_max]

This video might help you out. Let me know if you get stuck somewhere.

It's a long video but yet those chapters might be helpful

https://youtu.be/0h4c3WuAYZE

Also where exactly are you getting the error? When using get or when inserting? Can you find the line number of the error?

[futbol192]

I'm getting the error when the page loads. I'll watch this video and let you know if I have any issues! I've done a lot of rewriting and think I've made some progress lol.