How to Use Google Sheets API | Google Sheet to HTML Table in 5 Steps

| July 31, 2023 | Google Apps Script | No Comments

Discover how to leverage the power of Google Sheets API to programmatically access, read, and extract data from Google Sheets. Learn how to transform this data into dynamic HTML tables, allowing you to display and interact with your Google Sheets data on web pages seamlessly. Enhance collaboration, automate data updates, and create user-friendly visualizations with this step-by-step guide to integrating Google Sheets with HTML tables.

Google Sheet API का उपयोग करके Google Sheet को HTML Table में बदलने के तरीके। इस ब्लॉग में हम बताएंगे कि कैसे आप Google Sheet API का उपयोग करके अपने Data को एक HTML Table में बदल सकते हैं। Google Sheet API के फायदे और इसके उपयोग के तरीके के साथ एक सरल और स्पष्ट विधि के माध्यम से अपने डेटा को Visual रूप में प्रस्तुत करने के लिए इस ब्लॉग को जरूर पढ़ें।

Step 1 : Create a Google Sheet

सबसे पहले आप एक Google Sheet बना लीजिए, जो भी Data आपको HTML पर दिखाना हो आप उसे इस Sheet मे इंटर कर दीजिए । Sheet बनाने के बाद आपको जो Browser पर URL दिखाई देगी, उसमे से जो / के बाद का कोड हैं वहाँ से / के पहले का कोड Sheet ID होता है जैसा की नीचे Image मे दिखाया गया हैं । साथ ही मे आपको Bottom मे जो Sheet Name हैं उसको भी Copy करना हैं , इन दोनों का ही उपयोग आगे Sheet को link करने मे होगा।

Google Sheets

यहा तक Step 1 Complete होती हैं । यदि आपके पास पहले से भी Sheet हैं तो उसमे केवल आपको Sheet ID और Sheet का नाम Copy करना हैं ।

Step 2 : Adding Google Sheets API

  • इसके बाद आप Menu मे जा कर Extensions पर क्लिक करे , और Apps Script Open करे ।

  • 1. अब आपको Services के सामने वाले + Button को क्लिक करना हैं ।
  • 2. इसके बाद जो Page open होगा उसमे आपको Google Sheets API Search कर Select करना हैं ।
  • 3. इसके बाद नीचे एक Identifier आएगा , Default मे इसमे Sheets लिखा होता हैं आप चाहे तो Change भी कर सकत हैं , आप जो भी Identifier रखे उसका उपयोग आपको Apps Script मे करना होगा।
  • 4. इसके बाद आप Add Button पर क्लिक करेंगे जिससे की Apps Script मे Google Sheet Service add हो जाएगी।
  • 5. और Add हुई Service आपको Left Panel पर दिखाई देने लगेगी।
Google Sheets API Add a Service

इतना करने के बाद हम Google Apps Script Code लिखेंगे।

Step 3 : Google Apps Script Code

Left Panel पर आपको Code.js File दिखाई देगी जिसमे आपको निम्न Code लिखना है। 

function doGet(e) //01
{
    return HtmlService.createTemplateFromFile("index").evaluate();  //02
}

function TableData() //03
 {
  return Sheets.Spreadsheets.Values.get("1Fa9V.......................QI", "Inv!A:E").values; //04
}

आइए अब मे आपको उपरोक्त Code की प्रत्येक Line मे क्या लिखा हैं उसके बारे मे समझ देता हु ।

  • 01: doGet() : जब भी आप Deployment लिंक पर क्लिक करते हैं तब सबसे पहले doGet Function Call होता हैं ।
  • 02: इस Syntax पर हम जो Next Step मे HTML File (index.html) बनाएंगे उसको लिंक करने लिए किया हैं। जो भी Code इस Page मे लिखा होगा वह हमे Browser पर Display हो जाएगा।
  • 03: TableData() : यह हमने एक Custom Function बनाया हैं इस Function को हमने JavaScript Code द्वारा Call किया हैं । और इसके जो वैल्यू Return होगी उसका उपयोग HTML मे data दिखाने के लिए किया है।
  • 04: इस लाइन पर हम हमारे द्वारा बनाई गई Google Sheet File के URL मे से ID वाली वैल्यू को Pass करेंगे और दूसरे Parameter मे हम Sheet का नाम Pass करेंगे और ! के sign से साथ हम Range Define करेंगे । हम जो भी Range देंगे उतना Data ही Google Sheet से Read हो कर HTML पर display होने लगेगा।

Step 4 : Add HTML File

इतना करने के बाद हम HTML File बनाएंगे । आइए मे आपको HTML फाइल बनाने की Process समझाता हु ।

  • 1. आपको File के सामने लिखे हुवे (+) Add Button पर क्लिक करना है।
  • 2. उसके बाद आपको HTML Option select करना हैं।
  • 3. इसके बाद आपको index लिखना हैं यह file का नाम हैं माना index connect किया हैं इसलिए मे यंहा पर index लिख रहा हु। केवल index ही लिखना हैं .html अपने आप ही जुड़ जाएगा।

Google Apps Script add HTML File

अब जो फाइल आपको दिखा दे रही हैं उसके Code को आप निम्न HTML Code से Replace कर दीजिएगा।

यदि जो भी इस Google Sheets API Article मे लिखा हैं इसे आप Video Format मे देखना चाहते हैं तो यहा से देख सकते हैं। 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
      <script src="https://code.jquery.com/jquery-3.6.3.js" ></script>
  </head>
  <body>
      <h1>Welcome</h1>

     <table  class="table table-striped">
      <tbody id="MyTBody">  <!-- 01 -->
      </tbody>
    </table>



    <script>

      google.script.run.withSuccessHandler(DisplayData).TableData(); // 02. 

      function DisplayData(data)  // 03.
      {

        $(document).ready(function () {


          var Table="", Rows="", Columns="";

          $.each(data, function(key, value) // 04 
          {
              Columns = "";
              $.each(value, function(key1, value1) // 05 
              {
                Columns = Columns + '<td>' + value1 + '</td>'; // 06 
              });

              if (Columns != "") // 07 
              {
                  Rows = Rows + '<tr>' + Columns + '</tr>';
              }
          });

          $("#MyTBody").append(Rows); // 08  

        });
      }

    </script>
  </body>
</html>

उपरोक्त Code को आपको यहाँ पर समझता हु ।

  • 01. यहाँ पर हमने एक HTML Table Body का को एक ID Provide की हैं। और इसका इस पर हम JavaScript से Dynamic TR और TD tag बना कर Append कर देंगे।
  • 02. यहाँ पर हमने जो Apps Script मे TableData Function बनाया था उसे JavaScript के DisplayData Function से लिंक किया हैं । जैसे ही JavaScript Execute होगी वैसे ही Apps Script का TableData Function Call होगा और उसका Return आने पर Javascript का DisplayData Function Call हो जाएगा।
  • 03. इस Function मे अपने एक Parameter लिया हैं इसमे की data Apps Script से आएगा।
  • 04. यहा पर हमने जो Google Sheet से Data आया हैं उसमे बहुत सी Rows हैं इस Function से हमने प्रत्येक Row को अलग अलग किया हैं।
  • 05. इस Function का उपयोग कर हमने जो उपरोक्त Function से Row आई हैं उसको Column मे Distribute किया हैं । Column की value Get कर ली हैं ।
  • 06. यहा पर हमने जो Columns की वैल्यू आई हैं उनको सभी को जोड़ कर एक String बना ली हैं, साथ मे हमने आवश्यकता अनुसार TD और TR tag का उपयोग भी किया हैं जिससे की Dynamic Table Creation हो जाएगी।
  • 07. जिन Column की वैल्यू Blank होगी उनको यंहा से हटा दिया गया है।
  • 08. जो हमने HTML मे Table बनाई थी उसकी tbody पर हमने यह उपरोक्त String को Append कर दिया हैं जिससे की आपको HTML पर Table का data display हो जाएगा।

Step 5 : Deploy Google Sheets API

इसके बाद अब हम इस Project को Deploy कर लेंगे।

Google Sheet API (Web)
  • 1. सबसे पहले आपको Deploy Button पर क्लिक करना हैं।
  • 2. New Deployment Select करना हैं ।
  • 3. इसके बाद जो Window open होगी उसमे Select Type मे जाएंगे।
  • 4. और Web App वाले Option को Select करेंगे।
  • 5. और उसके बाद Deploy Button को Click करेंगे।

इसके बाद जो भी Window open हो आप उनको Permission देते रहे, यह Security से Related होती हैं उन सभी Message को Allow करने पर अंत मे आपके पास निम्न प्रकार से लिंक आ जाएगी।

Deployment के बारे मे अधिक जानकारी या Deployment कैसे करते है जानने के लिए क्लिक करे

Step 6 : Execution of Google Sheets API

अब अंत मे हम हमारे द्वारा बनाए गए Project को Execute कर देखेंगे। इसके लिए आप जो Web App लिंक आई हैं उसके Copy भी कर लेवे और उस पर Click कर उसे Execute करे ।

Execute करने पर आपनी कुछ ही समय मे निम्न Image अनुसार Google Sheets का Data HTML Table पर display होने लगेगा।

आशा हैं मुझे आपको किस तरह से Google Sheets API का उपयोग कर HTML Table मे data दिखा सकते हैं, बहुत ही अच्छे से समझ आ गया होगा। यह Article आपको कैसा लगा जरूर बताए , अपना कीमती समय देने के लिए धन्यवाद ।

हमारे अन्य आर्टिकल

Related Posts

Add a Comment

Your email address will not be published. Required fields are marked *