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

CodePudding user response：

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);
});