Scroll to Top
๐Ÿ’ป
Free Code
Users get ready-to-use code at no cost.
๐Ÿ“‹
Easy Copy
Copy and use the code instantly.
โšก
Quick Learning
Understand concepts fast and clearly.
๐Ÿ“
Step-by-Step
Follow simple instructions to implement.
๐Ÿ“… August 16, 2024 ๐Ÿ’ป Tutorial โญ Beginner Friendly

Get API Responses Directly in Google Sheets Like Postman

Author Avatar

Ashish Dwivedi

Editorial Team โ€ข Tech Writer

About This Tutorial

You can get API responses directly in Google Sheets using IMPORTDATA, IMPORTXML, or custom scripts via Apps Script. This works like Postman by sending requests and retrieving JSON or XML data. It’s perfect for live data integration, automating tasks, and visualizing responsesโ€”no external tools needed!.
  1. Step 1: Click on the Copy button to copy the code snippet.
  2. Step 2: Paste the copied code into your project’s script editor.

Apps Scripts Blog

๐Ÿ“‚ javascript
โšก script1.js
๐Ÿ“‚ html
๐ŸŒ template1.html
โšก script1.js
๐ŸŒ template1.html
function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('OutrightStore')
    .addItem('Show Sidebar', 'showSidebar')
    .addToUi();
}

function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('Sidebar3')
    .setTitle('Sidebar Form')
    .setWidth(300);
  SpreadsheetApp.getUi().showSidebar(html);
}

function submitRequest(url, method, email) {
  saveEndpoint(url, method);
  try {
    if (method.toUpperCase() === "GET") {
      var response = fetchDataFromEndpoint(url);
    } else {
      var response = convertSheetDataToJsonAndSend(url, method);
    }
    sendEmail(email, response);
    return response;
  } catch (e) {
    Logger.log("Error in submitRequest: " + e);
    return "Error: " + e.toString();
  }
}

function sendEmail(email, content) {
  var subject = "Data from Sheet2";
  MailApp.sendEmail(email, subject, content);
}

function saveEndpoint(url, method) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet3 = ss.getSheetByName("Sheet2");
  if (!sheet3) {
    sheet3 = ss.insertSheet("Sheet2");
    sheet3.getRange("A1").setValue("Endpoint");
    sheet3.getRange("B1").setValue("Method");
  }
  
  // Overwrite first data row instead of inserting a new row
  sheet3.getRange("A2").setValue(url);
  sheet3.getRange("B2").setValue(method);
}

function convertSheetDataToJsonAndSend(url, method) {
  var endpointUrl = url || getEndpointUrl();
  if (!endpointUrl) {
    SpreadsheetApp.getUi().alert('Endpoint URL not found. Please enter the endpoint URL.');
    return;
  }

  var sheet1 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  var dataRange = sheet1.getDataRange();
  var data = dataRange.getValues();
  var headers = data[0];
  var jsonData = [];

  for (var i = 1; i < data.length; i++) {
    var row = data[i];
    var jsonObject = {};
    for (var j = 0; j < headers.length; j++) {
      jsonObject[headers[j]] = row[j];
    }
    jsonData.push(jsonObject);
  }

  var jsonString = JSON.stringify(jsonData, null, 2);

  try {
    var options = {
      "method": method,
      "contentType": "application/json",
      "payload": jsonString
    };
    var response = UrlFetchApp.fetch(endpointUrl, options);
    showResponseToUser(response);
    return response.getContentText();
  } catch (e) {
    Logger.log("Error sending data to endpoint: " + e);
    return "Error: " + e.toString();
  }
}

function showResponseToUser(response) {
  Logger.log(response.getContentText ? response.getContentText() : response);
}

function getEndpointUrl() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet3 = ss.getSheetByName("Sheet2");
  return sheet3 ? sheet3.getRange("A2").getValue() : null;
}

function fetchDataFromEndpoint(url) {
  try {
    var response = UrlFetchApp.fetch(url);
    return response.getContentText();
  } catch (e) {
    Logger.log("Error fetching data from endpoint: " + e);
    return "Error: " + e.toString();
  }
}
<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
    }

    .container {
      max-width: 500px;
      height: 500px;
      margin: 50px auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    h2 {
      text-align: center;
      color: #333;
    }

    label {
      font-weight: bold;
    }

    select,
    input[type="text"],
    input[type="button"],
    input[type="email"] {
      width: 100%;
      padding: 10px;
      margin: 5px 0 15px 0;
      border: 1px solid #ccc;
      border-radius: 3px;
      box-sizing: border-box;
      font-size: 16px;
    }

    input[type="button"] {
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }

    input[type="button"]:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Test Endpoint</h2>
    <form id="endpointForm">
      <label for="method">Method:</label><br>
      <select id="method" name="method">
        <option value="GET">GET</option>
        <option value="POST">POST</option>
        <option value="PUT">PUT</option>
        <option value="PATCH">PATCH</option>
      </select><br><br>

      <label for="endpointUrl">Endpoint Credentials:</label><br>
      <input type="text" id="endpointUrl" name="endpointUrl" placeholder="Enter endpoint URL"><br><br>

      <label for="email">Email Address:</label><br>
      <input type="email" id="email" name="email" placeholder="Enter email address"><br><br>

      <input type="button" value="Submit" onclick="submitRequest()">
    </form>
  </div>

  <script>
    function submitRequest() {
      var method = document.getElementById("method").value;
      var url = document.getElementById("endpointUrl").value;
      var email = document.getElementById("email").value;

      google.script.run
        .withSuccessHandler(showResponseToUser)
        .submitRequest(url, method, email);
    }

    function showResponseToUser(response) {
      alert("Response from server:\n" + response);
    }
  </script>
</body>
</html>