Google Sheet 的正确格式和命令 - Json 馈送数据表答案

【问题标题】：proper format and commands for Google Sheet - Json fed DatatablesGoogle Sheet 的正确格式和命令 - Json 馈送数据表
【发布时间】：2021-09-21 20:45:19
【问题描述】：

试图直接从 Google Sheet 为 Datatables 表提供一组 json 数据，我首先遇到了这种错误：

DataTables warning: table id=example - Requested unknown parameter 'name' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

这是我的 json 与 in their example 提供的 json，当然格式不同

{
  "range": "json!A1:Y1000",
  "majorDimension": "ROWS",
  "values": [
    [
      "name",
      "position",
      "salary",
      "start_date",
      "office",
      "extn"
    ],
    [
      "Unity Butler",
      "prova",
      "$85,675",
      "2009/12/09",
      "San Francisco",
      "5384"
    ]
  ]
}

{
  "data": [
    {
      "id": "1",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "id": "2",
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011/07/25",
      "office": "Tokyo",
      "extn": "8422"
    },
    {...}
]
}

我了解不同的格式需要不同的处理方法，我很想知道如何处理。我接受的@andrewjames 提供的答案解释了不同格式的性质以及如何处理它们。
基本上只需要从ajax option 中删除“columns”参数，正如您可以从jsfiddle 中看到的那样，您可以在其中找到完整的工作代码（以及库）。

更新：补充任务

现在，假设您想将一些额外信息安排到一组 toggle hide-show child rows 中。

只要数据格式尊重示例提供的原始格式，我可以轻松做到这一点：我什至可以通过 .php 文件从 mysql db 中获取数据并将其排列为 json！ jsfiddle

 <?php
$con=mysqli_connect("","","","");
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

$out = array();
 
if ($result = mysqli_query($con, "SELECT * FROM your_table")) {
  $out = $result->fetch_all(MYSQLI_ASSOC);
}
 
echo "{ \"data\": ", json_encode( $out ), "}";

mysqli_close($con);
?>

当我尝试从我常用的 GSheet-fed json 数组中提取数据时，问题就开始了：如何结合子行切换功能和 GSheet 通常格式化的 json 文件？

【问题讨论】：

标签： javascript json google-sheets datatables google-sheets-api

【解决方案1】：

您在 DataTables 示例中显示的 JSON 数据是一个对象数组：

[ {...}, {...}, ... ]

您创建的 JSON 数据是一个数组数组：

[ [...], [...], ... ]

DataTables 可以使用这两种结构作为其数据源 - 但它必须以不同的方式这样做..

对于对象数组，每个对象代表 DataTables 数据的（潜在）行 - 行中的每个值都由名称和值组成 - 例如：

"salary": "$320,800"

这就是 DataTable 使用如下列定义的原因：

{ "data": "salary" }

这意味着：对于这个单元格的数据，使用名称为“salary”的值。

但在您的情况下，没有名称 - 只有值：

"$85,675"

因此，您不能使用 { "data": "salary" }，因为您的 JSON 中不存在该名称（“薪水”）。

此外，您的结构在其第一个数组中包含列标题以及行数据：

[
  "name",
  "position",
  "salary",
  "start_date",
  "office",
  "extn"
],

要解决这些差异，您有 2 个基本选项：

重新排列您的 JSON，使其与“对象数组”结构相匹配。
查看一个基于数组数组的相关 DataTables 示例 - 例如 Ajax data source (arrays)。

选项 (2) 更容易 - 更接近您的起点。

但无论哪种情况，您仍然需要处理列标题，因为它们与列体行是分开的，需要单独定义。

目前，您的第一行（看起来像列标题）最终会显示为第一行数据 - 而不是您想要的。

一种方法是定义您的<html> 表以包含已经包含的标题（硬编码）：

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
</table>

或者，你可以使用这个：

<table id="example" class="display" style="width:100%">
</table>

并在 Datatable 定义中定义列标题，使用 DataTables title 关键字：

<script>
 
$(document).ready(function() {
    $('#example').DataTable( {
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    } );
} );

</script>

当您执行此操作时，您需要从 JSON 中删除标题数组：

{
  "range": "json!A1:Y1000",
  "majorDimension": "ROWS",
  "values": [
    [
      "Unity Butler",
      "prova",
      "$85,675",
      "2009/12/09",
      "San Francisco",
      "5384"
    ],
    [
        // more array data here...
    ], ...
  ]
}

现在对于数组数组，不需要为每一列指定data 值。因为每一行都是一个普通数组，DataTables 自动将第一个值放在行的第一个单元格中，将第二个值放在第二个单元格中，依此类推...

最后说明：在您的示例中，您使用了这个：

dataSrc: 'values' // values instead of data in this case

这很好。它告诉 DataTables 在名为 values 的顶级字段中查找您的数组数组。

更新

对于子行示例，如果您停止使用数组数组并开始使用对象数组，您将会轻松很多。这样，您可以使用对象 names 明确选择哪些值属于父行，哪些属于子行。

因此，如果您在工作表中有源数据，并且带有标题：

heading_1	heading_2	heading_3
value 1	value 2	value 3
value 4	value 5	value 6

然后你需要从这个结构中转换数据：

[ 
  [ "value 1", "value 2", "value 3" ],
  [ "value 4", "value 5", "value 6" ]
]

{ "data": [ 
  { "heading_1": "value 1", "heading_2": "value 2", "heading_3": "value 3" },
  { "heading_1": "value 4", "heading_2": "value 5", "heading_3": "value 6" }
] }

JavaScript 可以做到这一点。也许你可以自己试试？如果遇到困难，可以提出具体问题。

拥有对象数组后，您可以更轻松地关注example。现在您可以选择在父行中使用哪个字段names，在子行中使用哪个字段。

【讨论】：

非常感谢您的回答。我正在研究它，并且已经发现它非常有用。让我更详细地阐述一个更好的评论，做一些尝试，我会回复你，甚至可能会编辑原始问题以使其更清晰。现在谢谢
我不确定我是否理解您所说的“一个 GSheet 通常格式化的 json 文件”的意思 - 但我已经更新了我的答案，试图给你一些指示（不是一个完整的答案）。这是一个新问题，所以你真的应该在一个新问题中提出这个问题。
感谢您的回答。我的意思确实是一个数组数组。我的意思是：GSheet 默认输出一个数组数组，我猜没有办法将其更改为根。因此，正如您所建议的，您所能做的就是用javascript计算出json，以便它采用不同的结构，但我猜这需要一个中间文件。无论如何，如果需要，我会提出一个新问题：我认为更新这个问题会更公平，可能我错了。没问题。再次感谢

【解决方案2】：

您介意发布您的特定 DataTables 脚本来解决此解决方案吗？我也在尝试读取 Google 表格导出的 JSON，但无法修改 JSON 输出，无法设置参数以读取此格式！

{
  "range": "json!A1:Y1000",
  "majorDimension": "ROWS",
  "values": [
    [
      "name",
      "position",
      "salary",
      "start_date",
      "office",
      "extn"
    ],
    [
      "Unity Butler",
      "prova",
      "$85,675",
      "2009/12/09",
      "San Francisco",
      "5384"
    ]
  ]
}

【讨论】：

这没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review