Google Sheet 的正確格式和命令 - Json 數據表

Question

嘗試直接從 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 與他們示例中提供的 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 選項中刪除“列”參數，正如您從這個jsfiddle中看到的，您可以在其中找到完整的工作代碼（以及庫）。

更新：補充任務

現在，假設您想將一些額外信息安排到一組切換隱藏顯示子行中。

只要數據格式符合示例提供的原始格式，我就可以輕松做到這一點：我什至可以通過 .php 文件從 mysql db 中獲取數據並將其排列為 json！ 提琴手

 <?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 數據是一個對象數組：

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

您創建的 JSON 數據是一個數組數組：

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

DataTables 可以使用這兩種結構作為其數據源 - 但它必須以不同的方式這樣做..

對於對象數組，每個對象代表 DataTables 數據的（潛在）行 - 行中的每個值都由名稱和值組成 - 例如：

"salary": "$320,800"

這就是為什么 DataTable 使用這樣的列定義：

{ "data": "salary" }

這意味着：對於該單元格的數據，使用名稱為 "salary" 的值。

但是在您的情況下，沒有名稱-只有值：

"$85,675"

因此，您不能使用{ "data": "salary" } ，因為該名稱 ("salary") 在您的 JSON 中不存在。

此外，您的結構在其第一個數組中包含列標題和行數據：

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

要解決這些差異，您有 2 個基本選項：

重新排列您的 JSON，使其與“對象數組”結構相匹配。
查看基於數組數組的相關 DataTables 示例之一 - 例如Ajax 數據源（數組）。

選項 (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>

並使用 DataTables title關鍵字在 Datatable 定義中定義列標題：

<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的頂級字段中查找數組。

更新

對於子行示例，如果您停止使用數組數組並開始使用對象數組，您將有更輕松的時間。 這樣您就可以使用對象名稱來明確選擇哪些值屬於父行，哪些屬於子行。

因此，如果您在工作表中有源數據，並帶有標題：

標題_1	標題_2	標題_3
值 1	值 2	值 3
值 4	值 5	值 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 可以做到這一點。 也許你可以自己試試？ 如果你遇到困難，你可以問一個具體的問題。

擁有對象數組后，您可以更輕松地遵循示例。 現在您可以選擇在父行中使用哪些字段名稱以及在子行中使用哪些字段名稱。

Google Sheet 的正確格式和命令 - Json 數據表

問題描述

1 個解決方案

解決方案1
2 已采納 2021-07-12 17:50:46

Google Sheet 的正確格式和命令 - Json 數據表

問題描述

1 個解決方案

解決方案1 2 已采納 2021-07-12 17:50:46

解決方案1
2 已采納 2021-07-12 17:50:46