Creating Properties Dynamically in TypeScript

Question

I'm building a data entry application using the DataGrid from DevExpress (devextreme) and allowing users to add and remove columns aside from the key column. I am storing both the column configuration and user data in SQL. The user data is stored as

Key | ColumnName        | ColumnValue
-------------------------------------
1     Company             Apple
1     NumberOfEmployees   12345

I then pivot the data to send to the grid.

Key | Company | NumberOfEmployees
---------------------------------
1     Apple     12345

When a user updates a row in the grid, the grid passes back a data object with properties for each column. I am using the column definition to try and find and match these properties back up but not getting the expected results.

const userColumns: any[] = [
    {
        ColumnName: 'Company'
    }, {
        ColumnName: 'NumberOfEmployees'
    }
];

const returnedFromGridRow: Record<string,any> = {};
returnedFromGridRow.Company = 'Apple';
returnedFromGridRow.NumberOfEmployees = 12345;

let result: Record<string,any> = {};
const results: any = [];

userColumns.forEach(function (value) {
  let x: string = value.ColumnName;
  let y: string = returnedFromGridRow[x];
  
  result = {x:y};
  console.log(result);
  results.push(result);
});

Expecting

{ "Company" : "Apple" }
{ "NumberOfEmployees" : 12345 }

but getting

{ "x" : "Apple" }
{ "x" : 12345 }

Playground

Deepak · Accepted Answer · 2021-12-12 17:01:05Z

1

The way you are using to create the result object won't work because it takes x as the key. To dynamically specify key, change the way you create the dynamic object like below to get the expected result:

userColumns.forEach(function (value) {
  let x: string = value.ColumnName;
  let y: string = returnedFromGridRow[x];
  
  result[x]=y; // This is the change
  console.log(result);
  results.push(result);
});

answered Dec 12, 2021 at 17:01

Deepak

2,7522 gold badges13 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating Properties Dynamically in TypeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related