Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to specify the column and data property when a property is another object #1684

Closed
sridhargoshika opened this issue May 9, 2024 · 2 comments

Comments

@sridhargoshika
Copy link

sridhargoshika commented May 9, 2024

The outer object has properties name, id, age, and company. The company property is another object with properties name and location.

    var table = jexcel(document.getElementById('spreadsheet'), {        
    data:[
        { name:'Jorge', id:'3', age:'40',company:{name:'nokia',location:'us'} },
        { name:'Robert', id:'4', age:'48',company:{name:'nokia',location:'us'} },
        { name:'Santos', id:'5', age:'32',company:{name:'nokia',location:'us'} },
    ],
    columns: [
        { type:'text', width:300, name:'id', title:'id' },
        { type:'text', width:100, name:'name', title:'name' },
        { type:'text', width:100, name:'age', title:'age' },
        { type:'text', width:100, data:'company.name', title:'company name' },
        { type:'text', width:100, data:'company.location', title:'company location' },
     ]
});

and the result table looks like this:
image

An example of this issue here:
https://jsfiddle.net/sridharnetha/vf0tknxb/2/

@sridhargoshika
Copy link
Author

customizing the script by using a method updateTable should work.

data = [
{ name:'Jorge', id:'3', age:'40',company:{name:'nokia',location:'us'} },
{ name:'Robert', id:'4', age:'48',company:{name:'nokia',location:'us'} },
{ name:'Santos', id:'5', age:'32',company:{name:'nokia',location:'us'} },
];

jspreadsheet(document.getElementById('my-spreadsheet'), {
data:data,
allowInsertColumn: false,
columns: [
{ type:'text', width:50, name:'id', title:'id' },
{ type:'text', width:100, name:'name', title:'name' },
{ type:'text', width:50, name:'age', title:'age' },        
{ type:'object', width:100, data:'company.name', title:'company name' },
{ type:'text', width:100, data:'company.location', title:'company location' },
 ],
 updateTable:function(instance, cell, col, row, val, label, cellName) {
 if (col == 3) {
   //alert(JSON.stringify(val));
    cell.innerHTML = val.name;
    }
   }
});

@hodeware
Copy link
Collaborator

hodeware commented May 9, 2024

You can use that, on the Pro version there is a feature call data binding.
https://jspreadsheet.com/docs/data

@hodeware hodeware closed this as completed May 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants