Is there a way to pull more than one row from google sheets using appsript

Question

Hello guys below is a link to my google sheet database please i want to implement a feature that will allow me pull data from google sheets to html table when they select a date range eg( from 12/1/2019 to 12/7/2019) and a specific state(eg California) will display only the records for california that fall into the date range please i will be grateful if i have the solution to this as it is a bottle neck for me to deliver on this project. Thanks[

 code.gs function getTableData(fac, dataaaa) { var sheet = SpreadsheetApp.openByUrl(url).getSheetByName("data2"); var allSheetRowData=sheet.getDataRange().getValues(); var sheetHeaderData=allSheetRowData[0]; var dateColIndex = sheetHeaderData.indexOf("Date"); var stateColIndex = sheetHeaderData.indexOf("state"); var array=[]; var hey = fac.toString(); array.push(sheetHeaderData); var dat = dataaaa.toString(); var rowData; for(var i=1; i<allSheetRowData.length-1 ;i++){ if((allSheetRowData[i][dateColIndex]) == dat && allSheetRowData[i][stateColIndex]== hey){ rowData=allSheetRowData[i]; array.push(rowData); Logger.log(rowData); break; } } return array; } function include (filename){ return HtmlService.createHtmlOutputFromFile(filename).getContent(); }

 function extractAction () { var stateVal = document.getElementById ('extractstate'); var datepic = document.getElementById ('extractdate').value; if (stateVal[stateVal.selectedIndex].value == '') { alerterror ('Please choose the state'); } else if (datepic == '') { alerterror ('Please choose the Date'); } else { var dataaaa = datepic.toString (); var fac = stateVal.options[stateVal.selectedIndex].text; alertsuccess ('You successfully pulled the data'); google.script.run .withSuccessHandler (generateTable) .getTableData (fac, dataaaa); //generateTable(); } } function generateTable (dataArray) { var newarray = TwoDimensional (dataArray, 2); var newarray_2 = newarray.slice (1); newarray_2.forEach (function (r) { r.forEach (function (val, key) { var arrayhead = newarray[0]; var count = 0; console.log (r); var tbody = document.getElementById ('tableID'); var row = tbody.insertRow (count++); var cell1 = row.insertCell (0); var cell2 = row.insertCell (1); cell1.innerHTML = arrayhead[key]; cell2.innerHTML = val; }); }); }

 <table> <tbody id="tableID"> </tbody> </table>

html table like this

Answer 1

function getTableData(fac, data) {
  if(fac && data) {
    var sh=SpreadsheetApp.openByUrl(url).getSheetByName("data2");
    var vA=sh.getDataRange().getValues();
    var hA=vA[0];
    var hObj={};
    hA.forEach(function(e,i){hObj[e]=i;})
    var array=[];
    array.push(hA);
    for(var i=1; i<vA.length-1 ;i++){
      if((vA[i][hObj['date']])==data && vA[i][hObj['state']]==fac){
        array.push(vA[i]);  
      }
    }
    return array;   
  }
}

You were using 'Date' for getting date header index but that doesn't agree with you image.

I would do it like this:

On the server side:

function getTableData(fac, data) {
  if(fac && data) {
    var sh=SpreadsheetApp.openByUrl(url).getSheetByName("data2");
    var vA=sh.getDataRange().getValues();
    var hA=vA[0];
    var hObj={};
    var html='<style>td,th{border:1px solid black}</style><table><tr>';
    hA.forEach(function(e,i){hObj[e]=i;html+='<th>' + e + '</th>';});
    html+='</tr>';
    var array=[];
    array.push(hA);
    for(var i=1; i<vA.length-1 ;i++){
      if((vA[i][hObj['date']])==data && vA[i][hObj['state']]==fac){
        html+='<tr>';
        vA[i].forEach(function(e,i){
          html+='<td>' + e + '</td>';
        })
        html+='</tr>';
        array.push(vA[i]);  
      }
    }
    html+='</table>';
    return {array:array,html:html};   
  }
}

on the client side:

 google.script.run
 .withSuccessHandler (function(obj){
    document.getElementById ('tableID').innerHTML=obj.html;
 })
 .getTableData (fac,dataaaa);