Uncaught TypeError : cannot read property data of undefined

Webix JS
#1

Hello Webix Team,

I have recently started using webix spreadsheet component.

I want to display a spreadsheet kind of table in my application using JSON data like below :

webix.ui({
id: “ssheet”,
container:“data”,
view:“spreadsheet”,
data: [{ “name”:“John”, “age”:30, “car”:null },{ “name”:“John”, “age”:30, “car”:null }]
});

But I am getting the below error when I use the above code snippet :

Uncaught TypeError: Cannot read property ‘data’ of undefined
at kt (sheets.js:354)
at Ct (sheets.js:334)
at _t (sheets.js:313)
at n (sheets.js:300)
at u.$onLoad (spreadsheet.js:117)
at u.Et (webix.js?v=6.4.2:19)
at u.Bt (webix.js?v=6.4.2:19)
at u.parse (webix.js?v=6.4.2:19)
at u.data_setter (webix.js?v=6.4.2:19)
at u.Ft (webix.js?v=6.4.2:19)

Please let me know how to resolve the same.

#2

Hey @srinivas5095suragala, you are trying to parse an incorrect data format inside the spreadsheet, you need to adhere to a certain format, which should include 4 parameters: data, size, spans, styles. You can read more about the valid spreadsheet data format here - https://docs.webix.com/spreadsheet__loading_data.html#dataloadingformat. For your task you’re probably better off using a normal datatable.

#3

Is there anyway I can load the backend data, that I get in JSON format, directly into the div without mentioning the styles, etc. like in below format -

data = this.mydata

#4

No, unfortunately, there is no way to do so, it will be far easier for you to use a datatable instead and style it appropriately.

#5

if I use datatable, will I have excel functionalities for displayed table?

#6

Hey again @srinivas5095suragala, there is actually a workaround for this use case, the data as it is right now won’t get parsed by the spreadsheet component, but we can modify it and write inside the data property of our new object. Please take a look at this example: https://snippet.webix.com/m2pv1fut.

I’d also like to note that this example doesn’t cover the case with dynamic loading, if you want to use load instead of parse you’ll have to pre-process the data before loading(you can read more about it here). Here’s an altered version: https://snippet.webix.com/oagyl1rc.