Google Sheets Api - add-on read from another sheet - google-apps-script

Question

Problem description:
I want to create an add-on on my google sheet (g-1). When the user opens the add-on, I want to immediately read another google spreadsheet (g-2) and populate dropdowns on g-1 based on those columns.
I have enabled the Googlesheet Api
in Code.js:
function readSpreadsheet() {
var questions = Sheets.Spreadsheets.Values.get("_ID_", "SHEET!A2:k").values
if (!questions) {
return 'No data found.';
} else {
return questions
}
}
the function above works, because if I add that to the title on the add-on I see the correct number of columns:
HtmlService.createHtmlOutputFromFile('QuestionBank').setTitle(readSpreadsheet().length)
or I can print the first row
readSpreadsheet()[0]
............
So far so good.
Now in my html file, QuestionBank.html,
Problem #1. I am not able to call readSpreadsheet, it returns undefined. var question_rows returns undefined.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
/**
read all rows, upon clicking on sync button. But this is not necessary if I can populate the dropdowns on load
**/
$(function() {
$('#sync').click(readSpreadsheet);
});
function readSpreadsheet() {
this.disabled = true;
$('#error').remove();
var question_rows = google.script.run
.withSuccessHandler(
function(textAndTranslation, element) {
element.disabled = false;
})
.withFailureHandler(
function(msg, element) {
element.disabled = false;
})
.withUserObject(this)
.readSpreadsheet();
for (var row = 0; row < question_rows.length; row++) {
alert(question_rows[row])
}
}
</script>
Problem #2: I have several dropdowns that I want their value to be unique value of the g-2 columns. I want those dropdowns to be populated when the add-on opens.
<select class="filter">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
so instead of Volvo, etc, I want the first column of my data, unique values
Problem #3: if on load is not possible, I can include a button to read the data and populate the dropdowns
<button class="sync-button" id="sync">sync</button>

Answer 1

How about the following answers?
Answer for Problem #1
google.script.run doesn't return values. When it uses values from google.script.run, in your case, textAndTranslation of withSuccessHandler is the returned value. So you can modify readSpreadsheet() as follows.
function readSpreadsheet() {
this.disabled = true;
$('#error').remove();
google.script.run
.withSuccessHandler(withSuccessHandler)
.withFailureHandler(
function(msg, element) {
element.disabled = false;
})
.withUserObject(this)
.readSpreadsheet();
}
function withSuccessHandler(textAndTranslation, element) {
element.disabled = false;
var question_rows = textAndTranslation;
for (var row = 0; row < question_rows.length; row++) {
alert(question_rows[row])
}
}
Answer for Problem #2
You can achieve it by putting google.script.run in $(function() {}). The sample is as follows. This is a sample. So please modify the variables to yours.
<select class="filter"></select>
<script>
$(function() {
google.script.run.withSuccessHandler(sample).readSpreadsheet();
});
function sample(data) {
for (var i=0; i < data.length; i++) {
$('.filter').append($('<option>').html(data[i]).val(data[i]));
}
}
Answer for Problem #3
Of course, you can set values to <select class="filter"></select> using a button.
If I misunderstand your questions, I'm sorry.