Google Sheet - Json fed 数据表的正确格式和命令

Question

试图直接从 Google Sheet 向 Datatables table 提供一组 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 的对比，当然格式不同

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

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

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

更新：补充任务

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

只要数据格式尊重示例提供的原始格式，我就可以轻松做到这一点：我什至可以通过 .php 文件从 mysql 数据库中获取数据并进行排列进入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 文件 ?

Answer 1

您从 DataTables 示例中显示的 JSON 数据是 objects:

的数组

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

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

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

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

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

"salary": "0,800"

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

{ "data": "salary" }

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

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

",675"

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

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

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

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

Re-arrange 你的 JSON 所以它匹配“objects 的数组”结构。
查看基于数组数组的相关 DataTables 示例之一 - 例如 Ajax data source (arrays).

选项 (2) 更简单 - 更接近您的起点。

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

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

一种方法是定义您的 <html> table 以包含标题 (hard-coded):

<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",
      ",675",
      "2009/12/09",
      "San Francisco",
      "5384"
    ],
    [
        // more array data here...
    ], ...
  ]
}

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

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

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

这很好。它告诉 DataTables 在名为 values.

的 top-level 字段中查找您的数组

更新

对于 child 行示例，如果您停止使用数组的数组并开始使用 object 的数组，您将有更轻松的时间。这样你就可以使用 object names 明确选择哪些 values 属于 parent 行，哪些属于child 行。

因此，如果您在 sheet 中有源数据，标题为：

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可以做到这一点。也许你可以自己试试？如果您遇到困难，可以提出具体问题。

一旦你有了 object 的数组，你就可以更容易地跟随 example。现在您可以选择在 parent 行中使用哪个字段 names 以及在 child 行中使用哪个字段。

Google Sheet - Json fed 数据表的正确格式和命令

proper format and commands for Google Sheet - Json fed Datatables

javascript

json

datatables

google-sheets

google-sheets-api