Create Object model with Dynamic Name and Properties JavaScript

Question

I am new in javascript/typescript & figuring out a way to create a dynamic named object & obj properties in typescript based on the filter type like below

Number type Filter Properties :

 {
    "filterType": "",
    "type": "",
    "filter":'',
    "filterTo":'' 
 }

Text type Filter Properties :

{
   "filterType": "",
   "type": "",
   "filter": ""
}

Date type Filter Properties :

{
  "dateFrom": "",
  "dateTo": "",
  "filterType": "",
  "type": ""
}

Based on the filter type selected I want to create object with particular filter type properties like below

"filterModel": {
            "OriginDate": {            <--------------- this column name I will be getting at runtime which i want to be the object name
                "dateFrom": "2022-09-21 00:00:00",   >
                "dateTo": "2022-09-21 00:00:00",     >
                "filterType": "date",                > properties i want to set based on filter type
                "type": "inRange"                    >
            },
            "Score": {      <--------------- this column name I will be getting at runtime which i want to be the object name
                "filterType": "number",  >
                "type": "inRange",       >
                "filter": 0,             > properties i want to set based on filter type
                "filterTo": 90           >
            },
            "Title": {      <--------------- this column name I will be getting at runtime which i want to be the object name
                "filterType": "text",  >
                "type": "contains",    >  properties i want to set based on filter type
                "filter": "wire"       >
            }
}

Assuming the Inputs I will be getting for generating this object will be

  generateFilterModel(columnName : string ,filterType : any ,filtervalues: any[]) 
{

// logic  -> generating the object and adding it to filterModel {}

      
}

For Removing all the filters I will be having a button to set filterModel {} as empty

Final Expected Output :

1. For Input -> this.generateFilterModel('OriginDate','Date',filtervalues[]) // (columnName, Filtertype , filtervalues)

Output :

"OriginDate": {
                "dateFrom": "2022-09-21 00:00:00",
                "dateTo": "2022-09-21 00:00:00",
                "filterType": "date",
                "type": "inRange"
            }

2. For Input -> this.generateFilterModel('Score','number',filtervalues[]) // (columnName, Filtertype , filtervalues)

Output :

"Score": {
            "filterType": "number",
            "type": "inRange",
            "filter": 0,
            "filterTo": 90
        }

3. For Input -> this.generateFilterModel('Title','text',filtervalues[]) // (columnName, Filtertype ,filtervalues)

Output :

"Title": {
            "filterType": "text",
            "type": "contains",
            "filter": "wire"
        }

PLAYGROUND :- https://stackblitz.com/edit/angular-ivy-qizcir?file=src/app/app.component.html

Answer 1

model

export interface filterModel {
  OriginDate?: OriginDate;
  Score?: Score;
  Title?: Title;
}

export interface OriginDate {
  dateFrom: string;
  dateTo: string;
  filterType: string;
  type: string;
}

export interface Score {
  filterType: string;
  type: string;
  filter: number;
  filterTo: number;
}

export interface Title {
  filterType: string;
  type: string;
  filter: string;
}

main file

const originalObj = {
  filterModel: {},
};
function generateFilterModel(
  columnName: string,
  filterType: any,
  filtervalues: OriginDate | Score | Title
) {
  const createObj = {
    [columnName]: filtervalues,
  };
  Object.assign(originalObj['filterModel'], createObj);
  console.log(originalObj);
}

const originDateObj = {
  dateFrom: '2022-09-21 00:00:00',
  dateTo: '2022-09-21 00:00:00',
  filterType: 'date',
  type: 'inRange',
};
generateFilterModel('OriginDate', 'Date', originDateObj);

const scoreObj = {
  filterType: 'number',
  type: 'inRange',
  filter: 0,
  filterTo: 90,
};
generateFilterModel('Score', 'number', scoreObj);

const titleObj = {
  filterType: 'text',
  type: 'contains',
  filter: 'wire',
};
generateFilterModel('Title', 'text', titleObj);