DEV Community

Sh Raj
Sh Raj

Posted on

Retrieve Google Sheets Data in JSON Format

Title: A Beginner's Guide to Accessing Google Sheets Data in JSON Format

Google Sheets is a powerful tool for managing and analyzing data. However, sometimes you may need to access your Google Sheets data outside of the Google Sheets interface, such as in a web application or mobile app. In such cases, you may want to retrieve the data in JSON format for easy processing in your code. In this article, we will show you how to access the JSON data of a Google Sheet and use it in your application.

We will use a sample Google Sheet for demonstration purposes. The sheet contains data on mobile applications, including their name, package name, size, category, platform, files, version, logo, screenshots, video, keywords, playstore link, requirements, and user ID. The URL of the sheet is https://docs.google.com/spreadsheets/d/1bsEHB_op27YC4TVLz2u7H9uZ1G8L8kCHMI1vffr_6V0/edit#gid=1769050897.

Step 1: Publish the Google Sheet

To access the JSON data of a Google Sheet, you need to first publish it to the web. To do this, go to the "File" menu and select "Publish to the web". In the dialog box that appears, select the sheet you want to publish, and then select the "Comma-separated values (.csv)" format. Click on the "Publish" button to publish the sheet.

Step 2: Get the Google Sheets API Endpoint

To access the JSON data of the published sheet, you need to use the Google Sheets API. To get the API endpoint, follow these steps:

  1. Go to the Google Developers Console (https://console.developers.google.com/).
  2. Create a new project by clicking on the "Create Project" button.
  3. Enter a name for your project and click on the "Create" button.
  4. Once the project is created, click on the "Enable APIs and Services" button.
  5. Search for "Google Sheets API" and click on it.
  6. Click on the "Enable" button to enable the API.
  7. Click on the "Create credentials" button and select "API key" from the dropdown.
  8. Copy the API key that appears on the screen.

Step 3: Access the JSON Data

To access the JSON data of the published sheet, you need to use the following URL:

https://docs.google.com/spreadsheets/d/{SPREADSHEET_ID}/gviz/tq?tqx=out:json&tq&gid={SHEET_ID}

Replace {SPREADSHEET_ID} with the ID of your Google Sheet, which you can find in the URL of the sheet. For example, the ID of our sample sheet is 1bsEHB_op27YC4TVLz2u7H9uZ1G8L8kCHMI1vffr_6V0. Replace {SHEET_ID} with the ID of the sheet you want to access. For example, the ID of the first sheet in our sample sheet is 1769050897.

To access the JSON data of the first sheet of our sample sheet, the URL would be:

https://docs.google.com/spreadsheets/d/1bsEHB_op27YC4TVLz2u7H9uZ1G8L8kCHMI1vffr_6V0/gviz/tq?tqx=out:json&tq&gid=1769050897

You can access this URL in your code using an AJAX request, as shown below:

Sure, here's how you can fetch the JSON data from the Google Sheets API endpoint using JavaScript:

const sheetId = "1bsEHB_op27YC4TVLz2u7H9uZ1G8L8kCHMI1vffr_6V0";
const sheetGid = "1769050897";
const url = `https://docs.google.com/spreadsheets/d/${sheetId}/gviz/tq?tqx=out:json&tq&gid=${sheetGid}`;

fetch(url)
  .then(response => response.text())
  .then(data => {
    // Parse the JSON data
    const json = JSON.parse(data.substring(47, data.length - 2));

    // Access the data rows
    const rows = json.table.rows;

    // Do something with the data
    rows.forEach(row => {
      console.log(row.c[0].v, row.c[1].v, row.c[2].v);
      // Output: id, name, package_name
    });
  })
  .catch(error => console.error(error));
Enter fullscreen mode Exit fullscreen mode

In this code, we first define the sheetId and sheetGid variables to specify which sheet and which worksheet we want to access. Then we construct the API endpoint URL by concatenating these variables with the base URL.

Next, we use the fetch() method to make a GET request to the API endpoint URL. We then extract the JSON data from the response using the text() method, parse it using JSON.parse(), and store it in a variable called json.

Finally, we can access the data rows by accessing the table.rows property of the json object. We can then loop through the rows using the forEach() method and output the values of the id, name, and package_name columns to the console.

You can modify this code to access the other columns of your sheet as needed. Additionally, you may need to add authentication to the API request if your sheet is not publicly accessible.

If you are facing problem while retrieving data using JavaScript use backend languages like php to retrieve the JSON file or you can also create your own Api endpoint to retrieve JSON data.

Top comments (0)