is it possible to receive Dom in google webscript?

Question

is it possible to receive Dom in google webscript?

72 Views Asked by devoloper At 05 April 2025 at 00:08

I receive from google sheet some html tags to be displayed but it shows as raw string. here is how

Index.html

  <? var BlogData = getSheetData("Blogs"); ?>
  <? for(var i = 0; i < BlogData.length; i++) { ?>
        <div class="text-muted text-end"><?= BlogData[i][1] ?></div>
        <!-- BlogData[i][1] this should be dom but it displays as string -->
  <?};?>

code.gs

 function doGet(e) {
    return HtmlService.createTemplateFromFile('Index').evaluate();
 }

 function getSheetData(sheetName)  { 
    var ss= SpreadsheetApp.openById("1s5AHWsdfbsgfaegsdthwrthaert5ad4y4gt56355h");
    var dataSheet = ss.getSheetByName(sheetName); 
    var dataRange = dataSheet.getDataRange();
    var dataValues = dataRange.getValues();  

   return dataValues;
  }

and the value comes from sheet Blogs look like this

A	B
`<h1>Title </h1>`
`<h2>Subtitle</h2>`
`<p>Paragraph</p>`

and unfortunately it displays in the Index.html as string

I need to show it as DOM not as string

Original Q&A

There are 2 best solutions below

Gabriel Carballo On 14 April 2022 at 23:55

I'll leave this as an example of what devoloper was doing:

He created a deployment so you can retrieve HTML tags from a Spreadsheet, like this:

Now the problem was that the deployment was showing results as raw texts as:

By using the HTML SCriptlets that App Script provides you can return the data from the spreadsheet by passing the values through a script. Something like this:

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
</head>

<body>
  <div class="root">
    <? const blogData = getSheetData("Blogs");?>
    <div>
      <? for(var i = 0; i < blogData.length; i++) { ?>
      <div>
        <? for (var j = 0; j < blogData[i].length; j++) { ?>
        <div>
          <?!= blogData[i][j] ?> // This is the solution that devoloper found
        </div>
        <?};?>
      </div>
      <?};?>

    </div>
  </div>
</body>

</html>

function doGet(e) {
  return HtmlService
    .createTemplateFromFile("index")
    .evaluate()
}


function getSheetData(sheetName) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var dataSheet = ss.getSheetByName('Blogs');
  var dataRange = dataSheet.getDataRange()
  var dataValues = dataRange.getValues();
  console.log(dataValues)

  return dataValues;
}

Once the above script is run the HTML tags added on the spreadsheet will return as a regular HTML DOM:

**devoloper** · Accepted Answer

finally, I found the solution.

using google interpolation tags is a bit tricky and I don't know types of these tags. but accidently I found that solution.

using <?= blogData[i][j] ?> will return html tags as it is.

however, <?!= blogData[i][j] ?> will return html format.

using exclamation mark completely changes the result.

is it possible to receive Dom in google webscript?

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in GOOGLE-APPS-SCRIPT

Related Questions in GOOGLE-SHEETS

Related Questions in WEB-SCRIPTING

Trending Questions

Popular # Hahtags

Popular Questions