Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.9k views
in Technique[技术] by (71.8m points)

javascript - HTML href as Google Apps Script variable

i'm making an index that generates automatically from a Google Spreadsheet. My script reads two columns, one with names and the other one with links. Then it generates an HTML with all the names as <li><a>"The name"</a></li>. My idea is to pass the links on the spreadsheet to the href=" " on each name, but I don't know how to do it.

Here is my .gs and .html code, and a link to my spreadsheet (to work on it, you may have to make a copy). https://docs.google.com/spreadsheets/d/1fEYqPnp9SIS7I2lzeeoEP7Pui4l0dgLD6t7D9Lki9oE/edit?usp=sharing

GS code

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}
  
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Index');
  
  function readData() {
    var range = spreadsheet.getRange(1, 1,spreadsheet.getLastRow(), spreadsheet.getLastColumn()).getValues();
    Logger.log(range);
    return range;
};

function readLinks() {
    var links = spreadsheet.getRange(1, 2,spreadsheet.getLastRow(), spreadsheet.getLastColumn()).getValues();
    Logger.log(links);
    return links;
};

HTML code

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div>
      <ul>
        <li id="proced"><a id="link"></a></li>
      </ul>
    </div>
        
    <script>
    
    function getData(values) {
    values.forEach(function(item, index) {
    var x = document.getElementById("link");
    x.innerHTML += '<li><a href="">' + item[0] + '</li></a>';
    });
    }
    google.script.run.withSuccessHandler(getData).readData();
    
    </script>
  </body>
</html>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Below is the modified code

GS code

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}
  
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Index');
  
function readData() {
    var data = spreadsheet.getDataRange().getValues()
    Logger.log(data)
    return data
}

HTML code

<script>

function getData(values) {
    var x = document.getElementById("link");
    values.forEach(function(item) {
        x.innerHTML += '<li><a href="' + item[1] + '">' + item[0] + '</li></a>';
    });
}
google.script.run.withSuccessHandler(getData).readData();

</script>

Changes

Here are the main changes I made:

.gs

  • Instead of getting the Names and Links separately, now the function readData gets the corresponding names and links all together by using getDataRange.

  • This returns a two dimensional array like this:

    [
      ["Google", "http://www.google.com/"],
      ["Facebook", "http://www.facebook.com/"],
      ["Twitter", "http://www.twitter.com/"],
      ["Youtube", "https://www.youtube.com"],
      ["Instagram", "http://www.instagram.com/"],
      ["Reddit", "http://www.reddit.com/"],
      ["Bing", "http://www.bing.com/"],
    ]
    
  • This makes the script faster, but if you want to get the ranges individually then you would need to use getRange("A1:A7") or with your method of getting last rows etc. Then get both ranges. The best thing would be to put them together into a two-dimensional array to pass them to the HTML together, if not it complicates things too much, because you will need to construct a chain of call backs to get the names and then wait for the links and then link them up together on the client-side anyway.

.html

  • Moved var x = document.getElementById("link"); outside the forEach loop. This stays the same for each item so no need to reinitialize it each time.
  • Changed forEach arguments to function(item) as you don't use the index.
  • Since each item is now a one-dimensional array eg => ["Google", "http://www.google.com/"] you can call:
    • item[0] => "Google"
    • item[1] => "http://www.google.com/"
  • So the resulting forEach is:
    values.forEach(function(item) {
        x.innerHTML += '<li><a href="' + item[1] + '">' + item[0] + '</li></a>';
    });
    

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...