Как получить данные таблицы handson в формате json с заголовком столбца в качестве ключа

У меня есть мобильная связь, и я хочу, чтобы данные вводились в мобильную ячейку на сервер. Я попытался запустить код ниже, но данные не в ожидаемом формате. Я ожидал получить данные в чистом формате 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 - заголовок столбца.

Ответ 1

Для тех, кто не сразу обнаружил ответ, см. комментарий @hakuna1811 выше, поскольку с версии 0.20.0 из Handsontable вместо этого следует использовать вызов .getSourceData(), если вы хотите получить данные назад в том же формате, который вы предоставили, например, в виде массива объектов. Непонятно, почему поведение вызова .getData() было изменено и оно не объяснено в связанной проблеме GitHub, отмеченной в комментарии @hakuna1811, но при по крайней мере, у нас есть рабочее решение - еще раз спасибо @hakuna1811 за ответ - он спас много охоты вокруг!

Ответ 2

Это здорово, что вы ожидаете этого, но это не так, как работает эта функция: P

Здесь вы действительно хотите:

Во-первых, вы не показываете нам, где вы устанавливаете параметр data. Если вы посмотрите на fiddle, я использую разные обозначения для создания объекта Handsontable, который позволяет мне указать формат data.

Если data указано, как я показываю его, как массив объектов строки, где каждый объект находится в формате, который вы описываете, метод hot1.getData() возвращает то, что вы ожидаете.

В ее нынешнем виде я понятия не имею, какой формат данных вы используете, либо применяйте этот способ создания HOT или покажите нам, как вы это делаете.

Удачи!

Ответ 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