google apps script, send object from server to HTML template and javascript

Question

I'm sending an array of array from .gs code to my page.html
If I parse my object directly in the HTML code, no problem, but if I try to put it in a javascript variable, using JSON.parse(), no chance.

What am I doing wrong?

.GS code doget()

var htmlTemplate = HtmlService.createTemplateFromFile('Index');
  htmlTemplate.colors = colors;
  htmlTemplate.jobs = extractDataFromSheet(approvedReal); <-- I can use in html
  htmlTemplate.admin = adminFound;
  htmlTemplate.approved = approvedReal;
  return htmlTemplate.evaluate();

HTML is OK, I can build my HTML page as I want:

<? for(var row=0;row<jobs.length;row++){
       var current = jobs[row];?>
        <div class='row no-gutters'>
        <?for(var col=0;col<current.length;col++){
            var singleJob = current[col];
            ... so on

But if I try to put the value in a javascript var, get only strings

 <script>
     var approved = <?= approvati ?>;
     var newPostit = false;
     var jobs0 = <?= JSON.stringify(jobs) ?>;  <--see image-1
     var jobs1 = <?= JSON.parse(jobs ) ?>; <--see image-2
........

jobs0 contain what you see in image, but not able to convert it back to my object and use it:

jobs1 is object but can't extract array, if I use jobs1[0] I get no array but the char 'V'

Answer 1

There are 3 types of scriplets:

• Standard: <?..?>: No output to html
• Printing: <?=..?>: Outputs data, but escapes it to avoid xss attacks
• Force-printing: <?!=..?>: Outputs data as is.

Since the data being passed is a json, you should use force-printing scriplets.

Answer 2

According to the best practices, load the html page and the pull in the values dynamically to render them. See the example below:

<p>List of things:</p>
<ul id="things">
    <li>Loading...</li>
</ul>

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(showThings)
      .getLotsOfThings();
});

function showThings(things) {
  var list = $('#things');
  list.empty();
  for (var i = 0; i < things.length; i++) {
    list.append('<li>' + things[i] + '</li>');
  }
}
</script>

Based on that, your setup would be as follows:

On your back-end:

function extractDataFromSheet( dataFromSheet ){
  // this you already have
}

On you front-end, you then call the back-end function and handle the response:

function handleSuccess( dataFromSheet ){
  var data = dataFromSheet;
  // work with data here
}

// here we call the back-end function and tell it to run the function above
google.script.run
  .withSuccessHandler(handleSuccess)
  .extractDataFromSheet()