Creating a Unique Data Dropdown with Google Apps Script and Google Sheets | Eliminate Duplicates
In this detailed Unique Data Dropdown tutorial, we’ll explore the powerful capabilities of Google Apps Script to supercharge your web app’s user experience. You’ll discover how to eliminate duplicate data from your Google Sheet and present it elegantly in a user-friendly HTML select dropdown.
This step-by-step guide covers essential topics, including:
- Writing efficient Google Apps Script code.
- Building a custom HTML web app.
- Removing duplicate entries from Google Sheets.
- Populating a dropdown menu with clean data. Deploying your solution for real-world use.
जब भी हमे Google Sheet से Data को Dropdown मे दिखाना होता हैं तो हम आसानी से दिखा पाते हैं लेकिन कभी कभी हमे Duplicates Records मे से केवल Unique Value को ही दिखाना होता हैं तब हमे कुछ Logics लगाना होते हैं , आज के इस Unique Data Dropdown Tutorial मे मे आपको इन Logics के बारे मे ही बताऊँगा। चलिए शरु करते हैं ।
Table of Contents
1. Google Sheet For Unique Data Dropdown
सबसे पहले हम एक Google Sheet बनाएगे जिसमे की हम Duplicate Data की Entry कर लेंगे।
2. HTML Code for Unique Data Dropdown
इसके बाद हम Apps Script मे एक dropdown.html File बना लेंगे
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<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>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<body onload="getCountry();">
<div class="d-flex align-items-center justify-content-center " style="height:400px">
<div class="border border-primary p-4 m-4 col-md-4 ">
<div class="form-group ">
<label for="Country">Select Country </label>
<select class="form-control ClsCountry" id="Country" autocomplete="off" >
<option>Select</option>
</select>
</div>
</div>
</div>
<script>
//Add JavaScript
</script>
</body>
</html>3. JavaScript Code for Unique Data Dropdown
इस Code को आप चाहे तो अभी जो हमने HTML File बनाई हैं उसमे भी रख सकते हैं ओर चाहे तो एक अलग File बना कर उसे भी Link कर सकते हैं ।
<script>
function getCountry() {
google.script.run.withSuccessHandler(function(data) {
var Options="";
$.each(data, function(key, value) {
Options = Options + '<option>' + value + '</option>';
});
$(".ClsCountry").append(Options);
}).getCountryList();
}
</script>4. Apps Script Code for Forgot Password
अब हम अपने Code.gs File मे यह Code लिखेंगे ।
let MySheets =SpreadsheetApp.getActiveSpreadsheet();
let CountrySheet = MySheets.getSheetByName("country");
function doGet(e) {
return HtmlService.createTemplateFromFile('dropdown').evaluate();
}
function getCountryList() {
let table = CountrySheet.getRange("A2:A").getValues().filter(r => r.every(Boolean));
table = removeDuplicates(table);
return table;
}
function removeDuplicates(data) {
newArray = [];
oldData="";
data.forEach(function(value) {
value = value[0];
if (oldData != value)
newArray.push(value);
oldData = value;
});
return newArray;
}
- doGet(e) : इस Function से हमने हमारे Dropdown.html page को Display करवाया हैं।
- getCountryList() : इस Function से हमने Country की List दिखाई इस इस Function को JavaScript द्वारा Call किया गया हैं ।
- removeDuplicates(data) : इस Function के द्वारा हमने Duplicate Values को Remove किया हैं ।
इसके बाद Project को Deploy कर लेंगे । Deploy किस तरह से किया जाता हैं सीखने के लिए यहाँ क्लिक करे ।
5. Video के माध्यम से समझने के लिए
6. Result (Unique Data Dropdown)
Execute करने के बाद आपको जो पहले Duplicates Record दिखाई दे रहे थे अब उनमे से केवल Unique Data ही दिखाई दे रहे होंगे। जब भी आपको Dependent Dropdown बनाना हो तब इस तरह के Logic काम मे आते हैं।
आशा हैं मुझे आपको Unique Data Dropdown बहुत ही अच्छे से समझ मे आ गया हैं, इस Article से related कोई भी Query हो तो आप मुझे निःसंकोच comment कर सकते हैं । यह Article कैसा लगा Comment करना न भूले । अपना कीमती समय देने के लिए धन्यवाद ।
हमारे अन्य आर्टिकल
- 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
