function doGet(req) {
  var doc = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = doc.getSheetByName("Sheet1");
  var values = sheet.getDataRange().getValues();
 
  var output = [];
 
  for (var i = 0; i < values.length; i++) {
    if (i == 0) {
      continue;
    }
    var row = {}; // Create a new row object for each row
    for (var j = 0; j < 100; j++) {
      if (!values[i][j]) {
        break;
      }
      row[values[0][j]] = values[i][j];
    }
    output.push(row); // Push the row object to the output array
    delete row;
  }
  return ContentService.createTextOutput(
    JSON.stringify({ data: output }),
  ).setMimeType(ContentService.MimeType.JSON);
}

<template>
  <div>
    <div v-if="loading">Loading...</div>
    <div v-if="error">{{ error }}</div>
    <div v-if="!loading && !error">
      <table>
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
            <th>Gender</th>
            <th>IP Address</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in data" :key="item.id">
            <td>{{ item.first_name }}</td>
            <td>{{ item.last_name }}</td>
            <td>{{ item.email }}</td>
            <td>{{ item.gender }}</td>
            <td>{{ item.ip_address }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
 
<script setup lang="ts">
import { ref, onMounted } from "vue";
 
interface UserData {
  id: number;
  first_name: string;
  last_name: string;
  email: string;
  gender: string;
  ip_address: string;
}
 
interface ApiResponse {
  data: UserData[];
}
 
const data = ref<UserData[]>([]);
const loading = ref(true);
const error = ref<string | null>(null);
 
const fetchData = async () => {
  try {
    const response = await fetch(
      "https://script.googleusercontent.com/macros/echo?user_content_key=lz8bMeky9nZWJmuStgx2rsEGjc1Egk8YjF07L_TSBfv9XonDxAYM9C8nmMwqx8-6d6m07jOdteNIW04gLHefPhxHlXrtCA9om5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnNSju4mToL0kmv4aGvGx5qNoOrXbqJbkSh14VYRKw6LRiOfmLkH894O4CKAoBMekTccC-VdjPULaXzYWADpk6RlMWncQrthsnNz9Jw9Md8uu&lib=MGMrW160EIITg9UzhWZpU7r9m-_X6TRQB",
    );
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    const result: ApiResponse = await response.json();
    data.value = result.data;
  } catch (err) {
    error.value = err.message;
  } finally {
    loading.value = false;
  }
};
 
onMounted(fetchData);
</script>
 
<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}
 
th,
td {
  border: 1px solid #ddd;
  padding: 8px;
}
 
th {
  background-color: #f2f2f2;
  text-align: left;
}
</style>