Javascript 一个数组可以'；不能在数据表中使用_Javascript_Jquery_Html_Google Apps Script_Datatables

Javascript 一个数组可以'；不能在数据表中使用

javascript jquery html google-apps-script datatables

Javascript 一个数组可以'；不能在数据表中使用,javascript,jquery,html,google-apps-script,datatables,Javascript,Jquery,Html,Google Apps Script,Datatables,我曾尝试使用带有数组的datatables创建一个表，但不知何故，它没有在html文件中显示该表。数组是在我的gs文件中定义的，如下面的代码所示这是一项简单的工作，但我仍然不确定出了什么问题 var ssId = 'xxxxxxxxxxxxx'; var ss = SpreadsheetApp.openById(ssId); var indexPage_sheetName = 'xxxxxxxx'; var valuesFromIndexPage = ss.getSheetByName(in

我曾尝试使用带有数组的datatables创建一个表，但不知何故，它没有在html文件中显示该表。数组是在我的gs文件中定义的，如下面的代码所示

这是一项简单的工作，但我仍然不确定出了什么问题

var ssId = 'xxxxxxxxxxxxx';
var ss = SpreadsheetApp.openById(ssId);
var indexPage_sheetName = 'xxxxxxxx';
var valuesFromIndexPage = ss.getSheetByName(indexPage_sheetName).getDataRange().getValues();//array of 850rows×15cols
valuesFromIndexPage.shift();

function getData() {
  $(document).ready(function(){
    $("#foo-table").DataTable({
      data: valuesFromIndexPage
    });
  }); 
}

@ZektorH这是运行我的代码的控制台日志

userCodeAppPanel:9 Uncaught TypeError: Cannot read property 'slice' of null
    at initializeTable (userCodeAppPanel:9)
    at af (4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:67)
    at 4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:10
    at ng.J (4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:94)
    at Hd (4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:42)
    at Dd (4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:43)
    at Bd.b (4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:39)

我再次查看了我的数据，发现console.log上的数据为空（但当我在Logger.log上看到它时，它有数据）。我把我做过的和得到的都贴在下面

function getData() {
  Logger.log(valuesFromIndexPage); //the array is in valuesFromIndexPage
  return valuesFromIndexPage;
}

Logger.log中的日志

[19-10-3109:47:00:116 JST]，案件名, .......

@ZektorH这些都是没有数据的代码

代码.gs

var ssId = 'xxxxxxxxxxxxxxxxxxxxxxxxx';
var ss = SpreadsheetApp.openById(ssId);

var indexPage_sheetName = 'xxxxxxxxxxxxxx';
var valuesFromIndexPage = ss.getSheetByName(indexPage_sheetName).getDataRange().getValues();


function createSidebar() {
SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('index').setTitle('My custom sidebar').setWidth(300))
}

function getData() {
  return valuesFromIndexPage;
}



function doGet(e) {
      return HtmlService.createTemplateFromFile('index').evaluate().setTitle('title');
}

index.html

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function() {
            console.log("ready!");
            google.script.run.withSuccessHandler(initializeTable).getData(); //calls the getData funciton from Apps Script and returns the results to the initializeTable function
        });

        function initializeTable(data) {
            console.log(data)
            var aDataSet = data.slice(1); // all except header
            var head = []; // headers
            data[0].forEach(function(e) {
                head.push({
                    'sTitle': e
                });
            });
            $('#foo-table').dataTable({
                "aaData": aDataSet,
                "aoColumns": head
            });
        }
    </script>
</head>

<body>
    <table id="foo-table" class="display" width="100%"></table>
</body>

</html>


$（文档）.ready（函数（）{
console.log（“准备就绪！”）；
google.script.run.withSuccessHandler（initializeTable）.getData（）；//从应用程序脚本调用getData函数，并将结果返回给initializeTable函数
});
函数初始化表（数据）{
console.log（数据）
var aDataSet=data.slice（1）；//除标头之外的所有
var head=[]；//头
数据[0]。forEach（函数（e）{
头推({
“针”：e
});
});
$（“#foo table”）.dataTable({
“aaData”：aDataSet，
“aoColumns”：标题
});
}

在dataTable中为表头和Chage

$（“#foo table”）。dataTable

在

$（“#foo table”）。dataTable

在

$（“#foo table”）。dataTable

var valuesFromIndexPage=[{“free-text-c1”：“free-text-r1”、“c2”：“r1”、“c3”：“r1”、“c5”：“r1”、“c7”：“r1”、“c8”：“r1”、“c9”：“free-text-r1”、“c10”：“free-text-r1”}、{“free-text-c1”：“free-text-r2”、“c2”：“r2”、“c3”：“r2”、“c5”：“r2”、“c6”：“r2”、“c7”：“r2”、“c8”：“r2”、“c9”：“free-text-r2”、“c10”：“free-text-text-c10”：；
来自index expage.shift（）的值；
函数getData（）{
$（文档）.ready（函数（）{
$（“#foo table”）.dataTable({
摧毁：没错，
是的，
数据：来自IndexPage的值，
列：u.keys（valuesFromIndexPage[0]）.map（（key）=>{return{“title”：key，“data”：key}）
});
}); 
}
getData（）

在dataTable中为表头和Chage

$（“#foo table”）。dataTable

在

$（“#foo table”）。dataTable

在

$（“#foo table”）。dataTable

var valuesFromIndexPage=[{“free-text-c1”：“free-text-r1”、“c2”：“r1”、“c3”：“r1”、“c5”：“r1”、“c7”：“r1”、“c8”：“r1”、“c9”：“free-text-r1”、“c10”：“free-text-r1”}、{“free-text-c1”：“free-text-r2”、“c2”：“r2”、“c3”：“r2”、“c5”：“r2”、“c6”：“r2”、“c7”：“r2”、“c8”：“r2”、“c9”：“free-text-r2”、“c10”：“free-text-text-c10”：；
来自index expage.shift（）的值；
函数getData（）{
$（文档）.ready（函数（）{
$（“#foo table”）.dataTable({
摧毁：没错，
是的，
数据：来自IndexPage的值，
列：u.keys（valuesFromIndexPage[0]）.map（（key）=>{return{“title”：key，“data”：key}）
});
}); 
}
getData（）

假设您在一台计算机上使用它，我可以让它像这样工作：

应用程序脚本

function createSidebar() {
  SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('sidebar').setTitle('My custom sidebar').setWidth(300))
}

function getData() {
  return SpreadsheetApp.getActiveSheet().getDataRange().getValues();
}

HTML页面

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function() {
            console.log("ready!");
            google.script.run.withSuccessHandler(initializeTable).getData(); //calls the getData funciton from Apps Script and returns the results to the initializeTable function
        });

        function initializeTable(data) {
            var aDataSet = data.slice(1); // all except header
            var head = []; // headers
            data[0].forEach(function(e) {
                head.push({
                    'sTitle': e
                });
            });
            $('#foo-table').dataTable({
                "aaData": aDataSet,
                "aoColumns": head
            });
        }
    </script>
</head>

<body>
    <table id="foo-table" class="display" width="100%"></table>
</body>

</html>


$（文档）.ready（函数（）{
console.log（“准备就绪！”）；
google.script.run.withSuccessHandler（initializeTable）.getData（）；//从应用程序脚本调用getData函数，并将结果返回给initializeTable函数
});
函数初始化表（数据）{
var aDataSet=data.slice（1）；//除标头之外的所有
var head=[]；//头
数据[0]。forEach（函数（e）{
头推({
“针”：e
});
});
$（“#foo table”）.dataTable({
“aaData”：aDataSet，
“aoColumns”：标题
});
}

希望这能有所帮助！

假设您在一台计算机上使用它，我可以让它像这样工作：

应用程序脚本

function createSidebar() {
  SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('sidebar').setTitle('My custom sidebar').setWidth(300))
}

function getData() {
  return SpreadsheetApp.getActiveSheet().getDataRange().getValues();
}

HTML页面

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function() {
            console.log("ready!");
            google.script.run.withSuccessHandler(initializeTable).getData(); //calls the getData funciton from Apps Script and returns the results to the initializeTable function
        });

        function initializeTable(data) {
            var aDataSet = data.slice(1); // all except header
            var head = []; // headers
            data[0].forEach(function(e) {
                head.push({
                    'sTitle': e
                });
            });
            $('#foo-table').dataTable({
                "aaData": aDataSet,
                "aoColumns": head
            });
        }
    </script>
</head>

<body>
    <table id="foo-table" class="display" width="100%"></table>
</body>

</html>


$（文档）.ready（函数（）{
console.log（“准备就绪！”）；
google.script.run.withSuccessHandler（initializeTable）.getData（）；//从应用程序脚本调用getData函数，并将结果返回给initializeTable函数
});
函数初始化表（数据）{
var aDataSet=data.slice（1）；//除标头之外的所有
var head=[]；//头
数据[0]。forEach（函数（e）{
头推({
“针”：e
});
});
$（“#foo table”）.dataTable({
“aaData”：aDataSet，
“aoColumns”：标题
});
}

希望这有帮助！

请检查控制台中的日志并在此处共享。请检查控制台中的日志并在此处共享。行列上有语法错误：u.keys（valuesFromIndexPage[0]）.map（（key）=>{return{“title”：key，“data”：key}）有什么帮助吗？您是否将

lodash

作为外部库包含？并检查

valuesFromIndexPage

array length我确实包含了lodash。数组长度如何？我是否应该编辑键（valuesFromIndexPage[0]）到键（valuesFromIndexPage[valuesFromIndexPage.length]）？您是否可以共享

valuesFromIndexPage的对象
[valuesFromIndexPage.length-1]

和

valuesFromIndexPage[0]

？它在行列上有语法错误：u.keys（valuesFromIndexPage[0]）.map（（key）=>{return{“title”：key，“data”：key}）有什么帮助吗？您是否将

lodash

作为外部库包含？并检查

valuesFromIndexPage

数组长度我是否包含了lodash。数组长度如何？我是否应该编辑键（valuesFromIndexPage[0]）到键（valuesFromIndexPage[valuesFromIndexPage.length]）？您是否可以共享

对象