Come ottenere dati tabella handson in formato json con intestazione di colonna come chiave

Question

Ho handsontable e voglio inserire i dati sulla cella handsontable sul lato server. Ho provato a correre sotto il codice ma i dati non sono nel formato previsto. Mi aspettavo di ottenere i dati in puro formato json come intestazione di colonna come chiave.

codice html codice

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

per creare il codice handsontable

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

per estrarre le informazioni da handsontable

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

Attualmente handsontable ha 2 righe e 2 colonne. Ora se premo il pulsante con valore cella (1,1) = 11, (1,2) = 12, (2,1) = 21 e (2,2) = 22, il risultato che sto ottenendo è nella finestra di avviso

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

Ma risultato che mi aspetto è

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

dove A e B è intestazione di colonna.

Answer 1

Che bello che sei in attesa che, ma questo è solo non come funziona quella funzione: P

Ecco cosa si vuole realmente:

Tanto per cominciare, non mostrarci dove si imposta la data opzione. Se osservi questo fiddle, utilizzo la notazione differente per generare un oggetto Handstable che mi consente di specificare il formato di data.

Se data viene indicato come lo mostro, come una matrice di oggetti riga, in cui ogni oggetto si trova nel formato che si descrive, il metodo hot1.getData() restituisce ciò che si aspetta.

Allo stato attuale, non ho idea di quale formato di dati si sta utilizzando, quindi adottiamo questo modo di creare un'istanza HOT o mostrarci come lo state facendo.

Buona fortuna!

Answer 2

Per gli altri che non ha scoperto subito la risposta, si veda il commento di @ hakuna1811 sopra che a partire dalla versione 0.20.0 del Handsontable chiamata .getSourceData() dovrebbe essere usato al posto se si desidera ottenere i vostri dati nello stesso formato come l'hai fornito, ad esempio come una serie di oggetti. Non è chiaro il motivo per cui il comportamento della chiamata .getData() è stato modificato e non è spiegato nel relativo GitHub issue annotato nel commento di @ hakuna1811, ma almeno abbiamo una soluzione funzionante - grazie ancora a @ hakuna1811 per la risposta - ha salvato un sacco di in giro!

Answer 3

È necessario mappare il risultato. supponiamo htContents è variabile che contiene [["11","12"],["21","22"]]

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