Поместите значения массива в разные текстовые поля HTML - PullRequest
Новая
       5

Поместите значения массива в разные текстовые поля HTML

0 голосов
/ 04 октября 2019

Мне нужно опубликовать результаты экзаменов отдельных лиц с листа Google . Я нашел некоторый код и создал еще одну HTML-страницу, которая теперь дает мне нужный результат, если я нажимаю на ссылку ПОКАЗАТЬ. Сценарий приложения:

var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1L1Qu6QCaDucr4Jy5eOAnQkX-wpYjz6eevqAMzBc72iQ/edit#gid=0");
var sheet = ss.getSheetByName("Sheet1");

function doGet(e){
 return search(e) ;
}  



function doPost(e){
 return search(e) ;
}  


   function search(e) {
  var id = e.parameter.id;

  var values = sheet
    .getDataRange()
    .getValues()
    .filter(function(row) {
      return row[0] == id;
    });

  var content = JSON.stringify(values);
  return ContentService.createTextOutput(content).setMimeType(
    ContentService.MimeType.TEXT
  );
}

и HTML-код:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
<input type="text" id="txtName"/>
<a href = "javascript:;" onclick = "this.href='https://script.google.com/macros/s/AKfycbwu_DKPuOMMb26-TjuO4rUWxYvobzNpd4TsqehsGxW9D9DTOLvF/exec?id=' + document.getElementById('txtName').value">SHOW</a>
</body>
</html>

Это дает результат в массиве, подобном [[ROLL, "Имя", MARKS1, MARKS2, MARKS3 ...]]. Теперь мне нужно использовать эти значения на HTML-странице, например 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  
<h1>INSTITUTE NAME</h1>
Name <input type="text" id="name"/><br>
Roll <input type="text" id="roll"/><br>
Subject 1 <input type="text" id="sub1"/><br>
Subject 2 <input type="text" id="sub2"/><br>
Subject 3 <input type="text" id="sub3"/><br>
Subject 4 <input type="text" id="sub4"/><br>
Subject 5 <input type="text" id="sub5"/><br>

</body>
</html>
Я имею в виду, как

enter image description here

Что мне делать?

Ответы [ 2 ]

1 голос
/ 07 октября 2019

Вам не нужно два HTML, вы можете выполнить весь процесс с одним HTML, используя google.script.run [1], чтобы связать ваши code.gs с Index.html и обновить его данными из электронной таблицы. .

Просто создайте файл Index.html следующим образом: 

 <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <input type="text" id="txtName"/>
  <button id="show">SHOW</button>
  <h1>INSTITUTE NAME</h1>
    Name <input type="text" id="name"/><br>
    Roll <input type="text" id="roll"/><br>
    Subject 1 <input type="text" id="sub1"/><br>
    Subject 2 <input type="text" id="sub2"/><br>
    Subject 3 <input type="text" id="sub3"/><br>
    Subject 4 <input type="text" id="sub4"/><br>
    Subject 5 <input type="text" id="sub5"/><br>
  </body>
<script>
//When click on show button it will run search function
window.onload = function(e){ 
  document.getElementById('show')
    .addEventListener('click', search);
}

//Get the value for txtName input and run search function in code.gs
function search() {
  var txtName = document.getElementById('txtName').value;
  google.script.run.withSuccessHandler(fillInfo).withFailureHandler(function (e) { console.log(e) }).search(txtName);
}

//It will run when a success response comes from search function in code.gs and updates the input with the sheet info
function fillInfo(values) {
  document.getElementById('name').value = values[1];
  document.getElementById('roll').value = values[0];
  document.getElementById('sub1').value = values[2];
  document.getElementById('sub2').value = values[3];
  document.getElementById('sub3').value = values[4];
  document.getElementById('sub4').value = values[5];
  document.getElementById('sub5').value = values[6];
}
</script>
</html>

code.gs 

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

//Search for the id and return the array for that row
function search(id) {
  var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1L1Qu6QCaDucr4Jy5eOAnQkX-wpYjz6eevqAMzBc72iQ/edit#gid=0");
  var sheet = ss.getSheetByName("Sheet1");
  var values = sheet
  .getDataRange()
  .getValues()
  .filter(function(row) {
    return row[0] == id;
  });

   return values[0];
}

Разверните приложение, и вы сможете получить к нему доступ с помощью URL-адреса. .

[1] https://developers.google.com/apps-script/guides/html/communication

0 голосов
/ 04 октября 2019

Я предполагаю, что массив результатов похож на тот, который вы сказали. Я думаю, что лучший способ справиться с этим - создать dom-узел и добавить к элементу контейнера и обернуть эту логику в функцию зацикливания. Вот мой пример: 

const resultElement = (value) => {
    let wrapper = document.createElement("div");

    //ROLL
    let rollElement = document.createElement("input");
    rollElement.setAttribute("type","text");
    rollElement.value = value[0];
    wrapper.appendChild(rollElement);

    //Name
    let nameElement = document.createElement("input");
    nameElement.setAttribute("type","text");
    nameElement.value = value[1];
    wrapper.appendChild(nameElement);

    //Marks
    for(let i = 2; i < value.length; i++) {
        let markElement = document.createElement("input");
        markElement.setAttribute("type","text");
        markElement.value = value[i];
        markElement.setAttribute("id", ("mark_"+i));
        wrapper.appendChild(markElement);
    }
    return wrapper;
}

const handleAllValues = (values) => {
    let container = document.getElementById("container");
    for(let i = 0;i<values.length;i++) {
        let el = resultElement(values[i]);
        container.appendChild(el);
    }
}

, и у вас должен быть элемент с id="container" в вашем html.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...