CODEWITHSUNDEEP
javascripthtmlgoogle-apps-script
Renan Otero
Renan Otero

Reputation: 341

Make google script update html

I am trying to make a Google Script that reads a Spreadsheet and them send that information to a simple HTML, but I do not know how send information collected on Google scrip to java script.

Here is the code:

Google Script

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

    function getUserName() {
  var ss = SpreadsheetApp.openById("1MRr0iZJoK-mfzIM6nMgycAg8BpPOCt3X-ndwYPZ3BeA").getActiveSheet();
  var lastRow = ss.getLastRow();
  var range = ss.getRange(2, 1, lastRow);
  var Names = range.getValues();
  return Names;
}

HTML and JavaScript

<script>
  function createPost() {
    var name[] = google.script.run.getUserName();
    var Post_area = document.getElementById('post_area');
    for(var i=0; i < qnt; i++){
      var element = document.createElement("div");
      element = div.innerHTML ='<img src="' + img[i] + '" alt="' + name[i] + '" id="image"><p"' + name[i] + '"></p>';
      Post_area.appendChild(element);
    }
    return 0;
  }
</script>

<section>
  <article id="post_area">
  </article>
</section>

Thank you!

Upvotes: 0

Views: 4514

Answers (1)

Harold
Harold

Reputation: 3337

Here a little demo and the code.

the code is yours, with little modifications:

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index');
}

function getUserName() {
  var ss = SpreadsheetApp.openById("0Ao02g19G1-G-dDF1M3MyMDJWODlFMkV4N1hDWThWZEE").getSheetByName("peoples")
  var lastRow = ss.getLastRow();
  var range = ss.getRange(2, 1, lastRow, 2);
  var Names = range.getValues();
  return Names;
}

and the index.html page:

<script>
  window.addEventListener('load', function() {
    google.script.run.withSuccessHandler(createPost).getUserName();
  });

  function createPost(name) {
    name = name || google.script.run.getUserName();
    var Post_area = document.getElementById('post_area');
    Post_area.innerHTML="";
    for(var i in name){
      var element = document.createElement("div");
      element.innerHTML ='<img src="' + name[i][0] + '" alt="' + name[i][1] + '" id="image"><p>&nbsp;' + name[i][1] + '</p>';
      Post_area.appendChild(element);
    }
    return 0;
  }
</script>

<section>
  <div> <h3>Starwar peoples</h3></div>
  <article id="post_area">Loading....
  </article>
  <div> spreadsheet ref <a href="https://docs.google.com/a/ousset.net/spreadsheet/ccc?key=0Ao02g19G1-G-dDF1M3MyMDJWODlFMkV4N1hDWThWZEE&usp=drive_web#gid=1">here</a></div>
</section>

What I changed:

in the index.html page I added window.addEventListener('load',function(){google.script.run.withSuccessHandler(createPost).getUserName();}); so it can load the code in the script and in the page.

Then in your code I changed the way you where calling the spreadsheet data, because you are calling only one column (and I needed two column of data to display name and url. In the JS code of the page, you were making reference to img[i] that was never declared. I also changed element = div.innerHTML for element.innerHTML and I changed the for loop (because I prefer to do it my way and because you made a loop on a undeclared variable).
Well I think that's all.
Good luck for the rest of your code.

Upvotes: 5

Related Questions