Data source from array of objects

Tags: #<Tag:0x00007efc61439090>
#1

Hello ,I have question regarding the data that I can pass as settings to the hot table ?
I got array of objects like
{ name: 'my-salad', status: 'salad', components: [ { tomato: 1, cucumber: 2 } ] }

I would like to have as table
name | status | tomato | cucumber
my salad | salad | 1 | 2

how to pass the data and columns to achieve that ?

#2

Hi @ejechev

Handsontable fully supports data as an array of arrays [[], []] and an array of objects [{}, {}].

#3

Yes, I would like to have first two keys of my object as columns and also column for each component. is that possible ?
I get the whole data as one object and the pass it like
....updateSettings({ data: myData, columns: [ {data: name}, {data: status}, {data: components} ] })
from these 3 keys I would like to get 4 columns

#4

The technique to achieve this goal is the same as previously mentioned - but colHeaders accept 1D array [number, string] so you can extract those values from your object. Example https://jsfiddle.net/AMBudnik/aotqhmd4/

#5

Can i display the nested data as columns ? from your example to display state and city next to name and id as columns

#6

Aah… OK, I guess I know what you mean - you want to make headers out of keys, right? Then you can use this

var headers = function(data){
  return Object.keys(data[0])
}
#7

Thank you for you quick responses!
No, I don’t mean the headers. I have nested array in my object like you got address in you fiddle.
I would like to create table like this one image
Is this possible with data like
var data = [ { id: 1345, name: 'Adam', address: [{state: 'CA'}, {state: CA}]}, { id: 2353, name: 'Tom', address: [{state: 'NY'}, {state: 'NY'}]}, { id: 3353, name: 'Maria', address: [{state: 'CA'}, {state: 'CA'}]} ]

#8

There’s no Handsontable API to handle that. You will need to create a new array of objects based on that code (native JS).

#9