Trouble fetching values from Google Sheets using getBatch method in JavaScript

Using javascript fetch() to retrieve a single value from a Google sheet works perfectly fine for me. However, when attempting to read multiple ranges, I encounter a 403 error.

The following code executes without any issues:

const apiKey = 'insert-your-key'; 
const spreadsheetId = 'insert-your-sheet-id';
const sheetName = 'Sheet1';

values = values = fetch(`https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values/${sheetName}?key=${apiKey}`)
.then(response => response.json())
.then (data => console.dir (data))
.catch(error => console.error('Encountered an error while reading Google Sheet: ', error));

However, replacing the fetch() method with values.getBatch results in a 403 error being displayed in the browser's Inspect panel:

values = fetch(`https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values:batchGet?ranges=Sheet1!A1:A2&ranges=subtitle!B1:B2?key=${apiKey}`)

The specific error message reads as follows:

code: 403
message: "Method doesn't allow unregistered callers (callers without established identity). Please use API Key or other form of API consumer identity to call this API."
status: "PERMISSION_DENIED"

You can find more information about values:getBatch in the documentation available at https://developers.google.com/sheets/api/samples/reading

Answer №1

Key Points for Adjustment:

  • Upon reviewing your script, I believe that the ? in ?key=${apiKey} should be replaced with &. This may be the root cause of the current issue you are facing with PERMISSION_DENIE.

  • Additionally, please ensure to perform URL encoding as shown below.

    • https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values:batchGet?ranges=ranges=Sheet1!A1%3AA2&ranges=subtitle!B1%3AB2&key=${apiKey}

Implementing these adjustments into your script will result in the following structure.

Revised Script Example:

values = fetch(`https://sheets.googleapis.com/ v4/spreadsheets/${spreadsheetId}/values:batchGet?ranges=Sheet1!A1%3AA2&ranges=subtitle!B1%3AB2&key=${apiKey}`)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Establishing a minimum width for the value of zero in AmCharts column series by customizing the bullet labels

Here's an interesting example where I have arranged column series with bullet labels. However, you may notice that there are some 0 values present as well. My goal is to establish a minimum width for the series so that even if the value is small or 0, ...

What is the best way to transfer a variable to a Promise.all operation?

In the scenario presented, there is an attempt to pass the constant filter into the Promise.all function, but the method of passing it down is proving to be a challenge, resulting in it being undefined in the final line of code. What is the best way to pa ...

Tips for transferring a value from a JavaScript variable to a jQuery function when a button is clicked

I have randomly created a number to be combined with a string as shown below: var pid = Math.floor((Math.random() * 10000) + 1); var str = "PERSONS"; var id = str.concat(pid); In my HTML, I have a div section containing a button like this: <div> ...

Storing the closed state of a pop-up box in localStorage for future reference

I'm struggling to get localStorage working properly on my website (). Here's what I need to achieve: A newsletter subscription pop-up on every page - this part is functioning correctly An option for users to click 'X' to close the po ...

Using NodeJs to Render HTML Templates and Implement Logic on the Server Side

Hello, I am currently working on developing a widget module for my Angular 1 based UI project. This widget is meant to display real-time information. My design involves sending an HTML view to the client from the Node server (potentially using Express.js) ...

Having trouble with implementing properties in React JS when using Particle JS

I am currently incorporating react tsparticle js into my website project as the background, but I have encountered an issue where it overlaps with the scrollbar. Despite my efforts, I am unable to adjust the width of the canvas inside Particle js. Here is ...

Preventing dynamically generated components from reinitializing upon adding a new object

Within my application, there is a unique feature where components are dynamically generated through a *ngFor loop. Here is an example of how it is implemented: <div *ngFor="let actionCategory of actionCategories | keyvalue"> <h2>{ ...

What is the best method to fetch a specific post from supabase for showcasing in a dynamic Route with Nextjs14?

I'm currently working on a Next.js application where I am fetching posts from a Supabase database. Everything works fine when retrieving all posts, but when trying to retrieve a single post dynamically using the ID, the screen displays null. Here&apos ...

Issue with collapsed navbar button functionality in Bootstrap version 5.1.3

Issue with Bootstrap 5 Navbar Collapse Functionality The navbar collapse button is not working on my PC. The button appears but when clicked, the navbar does not show up. Surprisingly, when I test the code on Codeply (without linking to Bootstrap 5 and ot ...

When the class name is identical, the click event appears to be malfunctioning

Why isn't the click event working in this code? What am I doing wrong? $(document).ready(function() { $('.dashboardList').click(function() { alert("hello"); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1. ...

Is it possible to update the state of an array within a .then() function in React?

` After retrieving an array of points with city and state information, I attempted to convert these points to latitude and longitude by making a fetch call. However, upon trying to update the state of the newly generated array, I found that it remained ...

What are the signs of a syntax error in a jQuery event like the one shown below?

One of my forms has an ID attribute of id ='login-form' $('#login-form').submit(function(evt) { $('#login-button').addClass('disabled').val('Please wait...'); evt.preventDefault(); var postData = ...

I discovered an issue in Handsontable while trying to copy and paste a numeric value in German format

For my upcoming project, I am looking to incorporate the Handsontable JavaScript grid framework. However, I have encountered a small bug that is hindering me from utilizing this library to its fullest potential. The task at hand involves displaying a tabl ...

The issue of resolving the react.js npm package

I'm currently working on developing a straightforward React module. The structure of my project is as follows: project |---src |---Login.js |---login.css |---index.js ... For this project, I started with the create-react-app boilerplat ...

Unable to remove the dropotron transparency from the menu dropdown

I'm currently working with a CSS template that includes a Dropotron for JQuery menu animation. I've run into a problem trying to remove the transparency effect on the dropdown menu. Oddly enough, the second dropdown labeled "About Us" appears sol ...

.fetchevery(...).then has no function

I recently upgraded Angular to version 1.6.4. As a result, I made changes to the code by replacing .success and .error with .then However, now I am encountering the following error: An unexpected TypeError occurred: .getAll(...).then is not a function ...

Error: Attempting to access a property 'notesObjectInService' that is undefined on the object

I'm currently facing an issue where my controller is unable to load an object from a service called notesFactory. The console.log(typeof notesFactory) statement returns 'undefined', causing notesObjectInService to trigger an exception. Desp ...

Revamp the display of selected values in React select - a fresh approach!

In my ReactJs application, I have implemented the react select control for multi-select functionality. However, I want to customize the display of selected values when more than one is chosen. Instead of showing all selected values, I would like to displ ...

Google Docs integrated with JqueryMobile for seamless document creation and editing

Recently, I experimented with a plugin that allows for viewing pdf documents directly in the browser. While it worked flawlessly on my desktop browser, I encountered some display issues when trying to access it from my mobile device. The document didn&apos ...

Is there a way to achieve this without relying on Ext.getCmp in this particular code snippet?

I am currently using the following code to trigger a button click event once the window show event is called. It works perfectly fine, but I want to achieve the same functionality without using Ext.getCmp. Here is the line of code: Ext.getCmp('recen ...