In `Code.gs` we read the data from the spreadsheet, assign it to a variable, and assign the variable to the template.
```JavaScript title="Code.gs"
var id = ''
function doGet(e){
var ss = SpreadsheetApp.openById(id);
var ws = ss.getSheetByName('data');
var list = ws.getDataRange().getValues();
var tmp = HtmlService.createTemplateFromFile("index");
tmp.title = "Hello Bootstrap";
tmp.list = list.map(function(r){ return r[0]; });
return tmp.evaluate();
}
```
Note that for this example we need to flatten the initial list (an array of arrays) to a one-dimensional array using the map function. Depending on your application, you may be fine with the array of arrays.
In `index.html` we iterate through the list using a for loop and print each list item in an unordered list:
```HTML title="index.html"
<body>
<h1>
<?= title; ?>
</h1>
<ul>
<? for(var i=0; i<list.length; i++){ ?>
<li><?= list[i]; ?></li>
<? } ?>
</ul>
</body>
```
Importantly, note that this pattern requires you to refresh the page to access any new data in the spreadsheet.