javascript 如何以列标题为键以json格式获取handson表数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29835876/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get handson table data in json format with column header as key
提问by bluebinary
I have handsontable and I want to get data enter on handsontable cell into server side. I have tried to ran below code but data is not in expected format. I was expecting to get the data in pure json format as column header as key.
我有手持设备，我想将手持设备上的数据输入到服务器端。我试图在代码下面运行，但数据不是预期的格式。我期望以纯 json 格式获取数据作为列标题作为键。
Html code
html代码
<div class="handsontable" id="example"></div>
<input type="button" name="submit" value="submit" onclick="submitForm()" />
code for creating the handsontable
创建handsontable的代码
$(document).ready(function () {
$('#example').handsontable({
startRows: 2,
startCols: 2,
rowHeaders: true,
colHeaders: true,
contextMenu: true,
});
});
code for extracting the information from handsontable
从handsontable中提取信息的代码
function submitForm(){
var $container = $('#example');
var htContents = JSON.stringify($container.handsontable('getData'));
alert(htContents);
}
Currently handsontable has 2 rows and 2 column. Now if I press the button with cell value (1,1)=11,(1,2)=12,(2,1)=21 and (2,2)=22, result I am getting is in alert window
目前handsontable有2行2列。现在，如果我按下单元格值 (1,1)=11,(1,2)=12,(2,1)=21 和 (2,2)=22 的按钮，我得到的结果是在警报窗口中
[["11","12"],["21","22"]]
But result I am expecting is
但我期待的结果是
[{"A":"11","B":"12"},{"A":"21","B":"22"}]
where A and B is column header.
其中 A 和 B 是列标题。
回答by bluebinary
For others who didn't discover the answer immediately, see @hakuna1811's comment above that since version 0.20.0 of Handsontable the .getSourceData()call should be used instead if you want to get your data back in the same format as you provided it - for example as an array of objects. It is not clear why the .getData()call's behavior was modified and it is not explained in the related GitHub issuenoted in @hakuna1811's comment, but at least we have a working solution - thanks again to @hakuna1811 for the answer - it saved a lot of hunting around!
对于其他没有立即发现答案的人，请参阅上面@hakuna1811 的评论，从 Handsontable 的 0.20.0 版开始，.getSourceData()如果您想以与提供的格式相同的格式恢复数据，则应改用该调用 - 例如作为对象数组。目前尚不清楚为什么.getData()调用的行为被修改，并且在@hakuna1811 的评论中提到的相关GitHub 问题中没有解释，但至少我们有一个可行的解决方案 - 再次感谢 @hakuna1811 的回答 - 它节省了很多狩猎大约！
回答by ZekeDroid
That's great that you're expecting that, but that's just not how that function works :P
太好了，您期望如此，但这不是该功能的工作方式：P
Here's what you actually want:
这是你真正想要的：
For starters, you don't show us where you set the dataoption. If you look at this fiddle, I use the different notation to generate a Handsontable object which allows me to specify the format of data.
首先，您不会向我们展示您设置data选项的位置。如果您查看此小提琴，我会使用不同的表示法生成一个 Handsontable 对象，该对象允许我指定data.
If datais given how I show it, as an array of row Objects, where each Object is in the format you describe, then the hot1.getData() method returns what you expect.
如果data给出我如何显示它，作为一个行对象数组，其中每个对象都采用您描述的格式，那么 hot1.getData() 方法返回您期望的内容。
As it stands, I have no idea what data format you're using so either adopt this way of instantiating HOT or show us how you're doing it.
就目前而言，我不知道您使用的是什么数据格式，因此要么采用这种实例化 HOT 的方式，要么向我们展示您是如何做的。
Good luck!
祝你好运！
回答by Moch Lutfi
You need mapping the result. let's assume htContentsis variable which contains [["11","12"],["21","22"]]
您需要映射结果。让我们假设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
