如何以列标题为键获取json格式的handson表数据答案

【问题标题】：How to get handson table data in json format with column header as key如何以列标题为键获取json格式的handson表数据
【发布时间】：2015-07-02 08:56:15
【问题描述】：

我有handsontable，我想将handsontable 单元上的数据输入服务器端。我试图在代码下面运行，但数据不是预期的格式。我期望以纯 json 格式获取数据作为列标题作为键。

HTML代码

<div class="handsontable" id="example"></div>
<input type="button" name="submit" value="submit" onclick="submitForm()" />

创建handsontable的代码

   $(document).ready(function () {
       $('#example').handsontable({
           startRows: 2,
           startCols: 2,
            rowHeaders: true,
            colHeaders: true,
            contextMenu: true,
       });
   });

从handsontable中提取信息的代码

   function submitForm(){
        var $container = $('#example');
        var htContents = JSON.stringify($container.handsontable('getData'));
        alert(htContents);
    }

目前handsontable 有2 行2 列。现在，如果我按下单元格值 (1,1)=11,(1,2)=12,(2,1)=21 和 (2,2)=22 的按钮，我得到的结果是在警报窗口中

[["11","12"],["21","22"]]

但我期待的结果是

 [{"A":"11","B":"12"},{"A":"21","B":"22"}]

其中 A 和 B 是列标题。

【问题讨论】：

标签： javascript jquery json handsontable

【解决方案1】：

对于没有立即找到答案的其他人，请参阅上面@hakuna1811 的评论，由于 Handsontable 的 0.20.0 版本，如果您想获取数据，应该使用 .getSourceData() 调用以您提供的相同格式返回 - 例如作为对象数组。目前尚不清楚为什么.getData() 调用的行为被修改，并且在@hakuna1811 的评论中指出的相关GitHub issue 中没有解释，但至少我们有一个可行的解决方案 - 再次感谢@hakuna1811 的回答 - 它保存了很多狩猎！

【讨论】：

【解决方案2】：

你期待的很好，但这不是该功能的工作原理：P

这就是你真正想要的：

首先，您不会向我们展示您在哪里设置了data 选项。如果你看一下这个fiddle，我会使用不同的符号来生成一个 Handsontable 对象，它允许我指定data 的格式。

如果data 给出了我的显示方式，作为一个行对象数组，其中每个对象都采用您描述的格式，那么 hot1.getData() 方法会返回您所期望的。

就目前而言，我不知道你使用的是什么数据格式，所以要么采用这种实例化 HOT 的方式，要么向我们展示你是如何做到的。

祝你好运！

【讨论】：

当页面呈现给用户时，我在所有单元格上显示空白。即使在空白单元格中，我们还需要指定数据格式吗？如果是这样，我们该怎么做？
有点，是的。您必须指定数据，但您可以只给它们空白值
从0.20.0版本开始，我们应该使用.getSourceData()来获取对象，而不是.getData，详情在github issue
@hakuna1811 您应该将此添加为单独的答案。我花了太长时间才找到您的评论。

【解决方案3】：

您需要映射结果。假设htContents 是包含[["11","12"],["21","22"]] 的变量

function buildObject(data) {
    return {
         'A': data[0], 
         'B': data[1]
    };
}
var newResult = htContents.map(buildObject); // newResult must be expected data

【讨论】：

【解决方案4】：

getSourceData() 方法返回所需的格式，但不会反映屏幕上显示的正确行和列顺序。以下打字稿代码适用于我：

protected getVisualTableData(): object[] {
    const tableData = [];
    for (let i = 0; i < this.hot.countRows(); i++) {
        tableData.push(this.visualObjectRow(i));
    }
    return tableData;
}

protected visualObjectRow(row: number): object {
    const obj = {};
    for (let i = 0; i < this.hot.countCols(); i++) {
        obj[this.hot.colToProp(i)] = this.hot.getDataAtCell(row, i);
    }
    return obj;
}

【讨论】：