How to display values from google script object in html ?

HTML code

I want to display object values in this form in <p or easier solutions

<div class="control-form-id">
  <label for="id">Id:</label>
  <input type="text" name="id" id="id" required>
  <button type="button" onclick="JSinHTML();" id="search" >Search</button>
</div>

<div class="serial">
  <label for="serial">Serial number:</label>
  <p id="serial">result</p>
</div>

<script>
  function JSinHTML(){
     let id_form ={}
  id_form.input = document.getElementById("id").value
  alert(id_form.input);
  google.script.run.main(id_form);
  document.getElementById("id").value = "";
} 
               
                  
</script>

GOOGLE SCRIPT code

function findId returns row number by typed id

function main(JSinHtml){
    let numberRow = findId(JSinHtml.input); 
    Logger.log("input in main " + JSinHtml.input);
    let toHtml = {};
    toHtml.id = sheet_spis.getRange(numberRow, column_id).getValue();
    toHtml.serial_number = sheet_spis.getRange(numberRow, column_serialnr).getValue();
    toHtml.size = sheet_spis.getRange(numberRow, column_size).getValue();
    toHtml.type = sheet_spis.getRange(numberRow, column_type).getValue();
    Logger.log(toHtml); //I want to display separately this values in few <p>
}

Answer

In your situation, how about the following modification?

HTML & Javascript side:

From

google.script.run.main(id_form);

To:

google.script.run.withSuccessHandler(e => {
  document.getElementById("serial").innerHTML = e.serial_number;
}).main(id_form);

Google Apps Script side:

From

Logger.log(toHtml); //I want to display separately this values in few <p>

To:

Logger.log(toHtml);
return toHtml;

Note:

• From <p id="serial">result</p>, I guessed that you might have wanted to put the value of serial_number. So, I proposed it. If you want to show the whole object of toHtml, please modify document.getElementById("serial").innerHTML = e.serial_number; to document.getElementById("serial").innerHTML = JSON.stringify(e);.

Reference:

• withSuccessHandler(function)