Get Data from google sheet, Remove Dublicate Value using apps script, javascript and display data in html select option or table.
Friends, Today we see how to read data from google sheet and remove dublicates value and put that data into html select option or html table. To det this done, we use below sheet that contents column 1. In this column has total 20 words. Some word is used one time and other word repeated. we are going to remove repeated words.
The sheet that used for this purpose is here:
Next step. 1.We have to read sheet value. For this, I have used following codes.
// following code read html file 'Index'.html
function doGet () {
var x ;
x = HtmlService.createTemplateFromFile('Index').evaluate();
x.setTitle("Project Title");
return x;
}
// following code read read Sheet2 data and return it to html
function readData () {
var ss = SpreadsheetApp.openById("1JRmXPbHodEW9LhXkDp0VXE6dEtrzf-DambC6Y2NdeDE");
var ws = ss.getSheetByName("Sheet2");
var sheetValue = ws.getRange(3, 4, ws.getLastRow(), 1).getValues();
var st = ""; // got data putting as array and seprate by comma
for (var i = 0; i < sheetValue.length; i++) {
st += sheetValue[i]+",";}
return st; // value return to index.html
};
2.Above code read spreadsheet data and return read value to index html file
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<script>
// function run on window load
window.onload = function() { readReq(); };
function readReq () {
document.getElementById('load').innerHTML="Loading...";
google.script.run
.withSuccessHandler(readDt)
.readsheet();}
function readDt (data) {
document.getElementById('load').innerHTML="";//hide loading
var datavalue = data.split(",");// split by comma
var uniqueData = [... new Set ( datavalue )];
var htmlselect = '<option value=""hidden>Selet something:</option>';
for (i = 0; i < uniqueData.length; i++) {
if(uniqueData[i]!==""){
htmlselect += "<option value='"+uniqueData[i]+"'>" + uniqueData[i]+ "</option>";
}
document.getElementById("selop").innerHTML = htmlselect;
document.getElementById("rd").innerHTML = uniqueData;
document.getElementById("wd").innerHTML = datavalue;
}}
</script>
<body>
<b id="load"></b>
<br>
<select id="selop">
<option>Option goes here</option>
</select>
<br>
After removing Dublicate value:<p id="rd"></p>
Width Dublicate value:<p id="wd"></p>
</body>
</html>
| CodyLab Blogger CodyLab Blogger |
Have a nice day!
-------------------------- -------------------------
-------------------------- -------------------------