How to Pull Data From Google Sheet To HTML Table Using Apps Script

Dynamically display data from google sheets into a Web App, Pull data from google spreadsheet to Website, How to read data from google spreadsheet using JavaScript, Google sheet invoice data display on HTML Table.

इस Article मे हम Google Sheet के data को Apps Script और jQuery का उपयोग कर HTML Table मे किस तरह दिखा सकते हैं, के बारे मे बताया हैं । जब भी आप कोई इस तरह की App बना रहे हैं जिसका Data Google Spreadsheet पर Store हैं और आपको अपनी Web Application पर दिखाना है तब आप Apps Script का उपयोग कर आसानी से Data Display करवा सकते हैं ।

पिछले Article मे हमने Local HTML Page से Data को Google Sheet पर Upload किया था जिसका Detail Article आप निम्न लिंक को क्लिक कर Read कर सकते है ।

SUBMIT A HTML FORM TO GOOGLE SHEET USING APPS SCRIPT

Google Sheet to HTML Table पर दिखाने के लिए हमे कुल 5 Step करना होती हैं । आइए हम एक एक कर सभी Steps समझते हैं ।

Step 1 : Create a Google Sheet

• सबसे पहले आपको एक Google Sheet बनाना होगी, हमने कुछ इस तरह से Google Sheet बनाई हैं (इस शीट मे हमने पहले HTML से Data Store किया था, जिसके बारे मे आप यहाँ क्लिक कर Read कर सकते हैं । )

• इसके बाद Address Bar पर Google Sheet के URL को Copy करे।

• Copy करने के बाद आप Apps Script Open करना होगी।

---

Step 2 : Apps Script for Google Sheet to HTML Table

Apps Script पर हम हमारी Google Sheet को लिंक करते हैं और फिर Apps Script को Deploy करने पर जो Link मिलता हैं उसे हम जैसी Requirement होती हैं उसके अनुरूप उपयोग करते हैं , Apps Script Open करने के लिए आपको निम्न Steps करना होंगे।

• Extension Menu पर क्लिक करे।
• Apps Script Select करे।

• Apps Script पर क्लिक करने पर एक Screen दिखाई देगी (यदि आपने पहले से प्रोजेक्ट बनाया हुवा हैं तो वही Open हो कर आ जाएगा ।) निम्न तीनों Steps यदि Project पहले से नहीं बना हैं तब ही करना होगी ।
• Untitled project पर क्लिक करे
• Project title पर जा कर जो भी आप नाम रखना चाहते हैं वह नाम Enter करे।
• उसके बाद Rename पर क्लिक करे ।

• अब आपको निम्न function screen दिखाई देगी इसमे आप को Code लिखना होगा।

• उपरोक्त Window मे निम्न Code को Copy करे ।
• “Your Google Sheet URL” के स्थान पर आपने जो Google Sheet URL Copy किया था उसे Paste करे।
• Sheet1 के स्थान पर जो भी Sheet का नाम हो उसे लिखे यदि आपने Sheet नाम Change नहीं किया हैं तो फिर Sheet 1 ही रहने देवे।

Google Sheet to HTML Table Apps Script

let MySheets = SpreadsheetApp.openByUrl("Your Google Sheet URL");  //01
let InvSheet = MySheets.getSheetByName("Inv");   //02 

function doGet(e)                                //03
{
   let table = InvSheet.getRange("A:E").getValues().filter(r=>r.every(Boolean)); //04
   let str = JSON.stringify(table);              //05
   return ContentService.createTextOutput(str);  //06
}

आइए आप आपको Google Apps Script के Syntax के बारे मे बताते हैं।

• 01: इस Line मे हमने MySheets Variable मे URL से Google Sheet को Declare किया हैं।
• 02: इस लाइन मे हमने MySheet मे से एक पहली Sheet को Point किया हैं।
• 03: doGet(e) इस Method का उपयोग Web Apps मे जब हम Apps Script Web Apps Link को call करते हैं तब Apps Script द्वारा doGet Function Call किया जाता हैं।
• 04: यहा पर हमने पहले 5 Columns के Data मे से Blank Rows को हटाया हैं और उसे table Variable मे Store किया हैं।
• 05: यहा पर जो Array मे वैल्यू आई है उसे String Format मे Convert किया हैं ।
• 06: हमारे द्वारा बनाई String को इस लाइन मे Return किया हैं।

इतना करने के बाद आप Script को Save करेंगे।

Related Video : How to Pull Data From Google Sheet To HTML Table Using Apps Script

---

Step 3 : Deploy Apps Script for Google Sheet to HTML Table

आप आपको Project को Deploy करना होगा। Deploy के लिए आपको Deploy Button पर Click करना होगा। उसके बाद New deployment पर क्लिक करना होगा।

यहा पर भी ध्यान देने वाली बात यह हैं की यदि आप एक बार पहले Deployment कर चुके हैं निम्न कोई भी ऑप्शन आपको नहीं दिखाई देंगे आपको सीधे ही Web App वाली लिंक प्राप्त हो जाएगी ।

• ऐसा करने पर निम्न Window open होगी । (यदि आपने पहले एक बार Deploy किया हैं तो यह Permission से related कोई भी Window Open नहीं होगी )

• उपरोक्त स्क्रीन पर आपको Setting वाले Icon पर क्लिक करना होगा।
• उसमे से हमे Web App को सिलेक्ट करना होगा।

• New Description : यहा पर आपको Deployment का नाम देना हैं ।
• Web App Execute as : मे आपकी Gmail ID सिलेक्ट हो कर आएगी।
• Who has access : मे आप जिन्हे भी Execution की Permission देना चाहते हैं वह सिलेक्ट करना होता हैं। अभी के लिए आप यहा पर Anyone सिलेक्ट करे ।
• Deploy : इतना कर आप Deploy Button पर Click करे।

Deploy करने पर निम्न Screen दिखाई देगी ।

इसमे आप Authorize Access की Permission देना होगी। यानि कई Authorize Access Button पर Click करना होगा।

इसके बाद आपको अपने Gmail Account को सिलेक्ट करना होगा जिससे आप Permission देना चाहते हैं।

इस तरह से Script का उपयोग करना Safe नहीं होता हैं Security Issue होते हैं , इसलिए यहा पर Google आपको Warning दे कर आपको Information देता हैं की आप जो भी कर रहे हैं यह Unsafe हैं फिर भी यदि आप Authorized करना चाहते हैं तो (unsafe) वाले option को select करे।

इतना करने पर आपके द्वारा बनाया गया Apps Script Project आपको Google Sheet को देखने, बनाने और Delete करने की Permission माँगता हैं यहा से Allow करने पर आपको एक Link दी जाती हैं ।

सभी Permission देना के बाद अंत मे आपको एक Web app URL provide की जाती हैं । आपको इस link को copy करना होता हैं।

और अब Apps Script का कार्य समाप्त होता हैं ।

---

Step 4 : Create a HTML Page

अब हम एक HTML Page बनाएंगे जिसमे jQuery का उपयोग कर जो लिंक हमने Apps Script से Copy की हैं उसके Data को Fetch करेंगे ।

4.1 Basic HTML With Bootstrap and jQuery

यहाँ पर केवल एक HTML Bootstrap का Basic Structure दिया हैं इसमे Script Tag मे आपको जो निम्न Code 4.2 पर दिया हैं उसको लिखना हैं ।

• इस Code मे Bootstrap के लिए CDN का उपयोग किया है ।
• साथ ही मे jQuery की CDN का उपयोग किया हैं । जिसके Help से getJSON Function को call किया हैं।
• एक Blank Table बनाई हैं जिसमे Dynamically Data को Append किया हैं।

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Imagination Invoice Data From Google Sheet Using Apps Script</title>
    <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>
    <table  class="table table-striped">
      <tbody id="MyTBody">
      </tbody>
    </table>
    <script>
          //Script Here 
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>
    

4.2 jQuery Code

हमने अभी जो Display.html File बनाई हैं उसके Script Tag मे हमे यह Code लिखना हैं ।

$(document).ready(function () {                               //01
   $.getJSON("URL", function (data) {                         //02
      var Table="", Rows="", Columns="";
      $.each(data, function(key, value) {                     //03
          Columns = "";
          $.each(value, function(key1, value1) {              //04 
               Columns = Columns + '<td>' + value1 + '</td>'; //05
          });
          Rows = Rows + '<tr>' + Columns + '</tr>';           //06
      });
      $("#MyTBody").append(Rows);                             //07
   });
});

• 01: Page Load होने के बाद Script Call हो इसलिए हम document Ready ka उपयोग करते है ।
• 02: Apps Script के लिंक से Data Fetch करने के लिए हम getJSON का उपयोग किया है । URL मे जो Apps Script से Code को Deploy किया था उसके बाद जो Link आई थी उसके यहा पर Paste करना हैं ।
• 03: Array की value को अलग अलग करने के लिए $.each का उपयोग किया है । ताकि हमने जो Data भेजा था उसमे से Rows को अलग अलग किया जा सके ।
• 04: यहा पर हमने जो row की string आई हैं उसमे से column निकालने के लिए एक बार फिर से अलग अलग किया हैं ।
• 05: यहा पर हमने td का उपयोग कर एक string बना कर सभी Columns को अलग अलग TD मे ले कर जोड़ दिया हैं ।
• 06: यहा पर हमने Columns की String को TR Tag मे के कर उनकी Rows बना ली हैं ।
• 07: Finally हमने जो String बनाई हैं उसे हम Table मे Append कर देंगे ताकि Data Table मे दिखाई देने लगे ।

---

Step 5 : Run HTML Page On Browser

अब हमने जो HTML Form बनाया हैं उसे Browser पर Run करेंगे । Run करने पर आपको कुछ इस तरह से Output दिखाई देगा।

अब आपका HTML Form to Google Sheet Connection के सभी Process Complete हो चुकी हैं ।

---

यह Article Google Sheet to HTML Table आपको कैसा लगा बताना न भूले मिलते हैं Next Article मे Thanks for Reading ।

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

• MySQL Function
• MySQL Stored Procedure
• PHP Get /Post Method के बारे में जाने
• PHP Math Function के बारे में जाने
• C से C ++ सीखे सरल शब्दों में
• PHP Variable के बारे में जाने
• Arduino Control Structure 
• Union in C
• Declaration of Pointer in C
• jQuery Search Filter
• MySQL Create Table | Alter Table | Drop Table
• API Using NODE REACT EXPRESS MYSQL SEQUELIZE (For Backend OR Server Side)
• CPANEL In Hindi