Dynamically assigning values to class properties in Angular with Typescript is a powerful

Question

Dynamically assigning values to class properties in Angular with Typescript is a powerful

I am working on a project where I have a class and a JSON object. My goal is to update the properties in the class based on the values in the JSON object, using Angular 9.

This is the class:

export class Searchdata{
  name:boolean=false;
  age:boolean=false;
  summer:boolean=false;
  winter:boolean=false;
  football:boolean=false;
  tennis:boolean=false;
}

And here is the JSON object:

[
   {
    "name": "name",
    "visible": true,
   },
   {
    "name": "age",
    "visible": true
   }, 
   {
    "name": "football",
    "visible": true
   }
]

The JSON object may not always have the same number of elements as the class has properties, but it can have all the same number of items for easier handling. I have explored various solutions, but for illustration purposes, below is how I envisioned the process working:

permPageData:any="The JsonObject";
tableSearchModel:Searchdata;

someFunction(){
  this.tableSearchModel = new Searchdata();

  permPageData.forEach(element => {
      if(element.name == this.tableSearchModel["element.name"])
        this.tableSearchModel[element.name] = element.visible;
  }
  return this.tableSearchModel;
}

javascript angular typescript

Answer 1

Answer №1

I believe that when utilizing a class to define your model SearchData, it is best practice for the class to include methods related to the SearchData.

Consider this implementation:

.ts

class Searchdata{
  name = false;
  age = false;
  summer = false;
  winter = false;
  football = false;
  tennis = false;

  constructor() {}

  setFromJSON(obj: Array<{name:string,visible:boolean}>) {
    obj.forEach(element => {
      this[element.name] = element.visible;
    });
  }

  toString() {
    return `{name:${this.name},age:${this.age},summer:${this.summer},winter:${this.winter},football:${this.football},tennis:${this.tennis}}`;    
  }
}

const permPageData = [
  {
    "name": "name",
    "visible": true,
  },
  {
    "name": "age",
    "visible": true
  }, {
    "name": "football",
    "visible": true
  }
];

const tableSearchModel = new Searchdata();
console.log(tableSearchModel.toString());
tableSearchModel.setFromJSON(permPageData);
console.log(tableSearchModel.toString());

output

{name:false,age:false,summer:false,winter:false,football:false,tennis:false}
{name:true,age:true,summer:false,winter:false,football:true,tennis:false}

Although using an interface presents a different approach, I found it quite intriguing.

.ts

interface Searchdata{
  name: boolean;
  age: boolean;
  summer: boolean;
  winter: boolean;
  football: boolean;
  tennis: boolean;
}

function searchDataNew(): Searchdata {
  return {
    name: false,
    age: false,
    summer: false,
    winter: false,
    football: false,
    tennis: false
  };
}

function searchDataToString(sd: Searchdata) {
  return `{name:${sd.name},age:${sd.age},summer:${sd.summer},winter:${sd.winter},football:${sd.football},tennis:${sd.tennis}}`;    
}

function arrayDataToObjData(arr: Array<{name:string,visible:boolean}>): Searchdata {
  const obj: any = {};
  arr.forEach(element => {
    obj[element.name] = element.visible;
  });
  return obj;
}

const permPageData = [
  {
    "name": "name",
    "visible": true,
  },
  {
    "name": "age",
    "visible": true
  }, {
    "name": "football",
    "visible": true
  }
];

const tableSearchModel: Searchdata = {
  ...searchDataNew(),
  ...arrayDataToObjData(permPageData)
};
console.log(searchDataToString(tableSearchModel));

result

{name:true,age:true,summer:false,winter:false,football:true,tennis:false}

Answer 2

I believe that when utilizing a class to define your model SearchData, it is best practice for the class to include methods related to the SearchData.

Consider this implementation:

.ts

class Searchdata{
  name = false;
  age = false;
  summer = false;
  winter = false;
  football = false;
  tennis = false;

  constructor() {}

  setFromJSON(obj: Array<{name:string,visible:boolean}>) {
    obj.forEach(element => {
      this[element.name] = element.visible;
    });
  }

  toString() {
    return `{name:${this.name},age:${this.age},summer:${this.summer},winter:${this.winter},football:${this.football},tennis:${this.tennis}}`;    
  }
}

const permPageData = [
  {
    "name": "name",
    "visible": true,
  },
  {
    "name": "age",
    "visible": true
  }, {
    "name": "football",
    "visible": true
  }
];

const tableSearchModel = new Searchdata();
console.log(tableSearchModel.toString());
tableSearchModel.setFromJSON(permPageData);
console.log(tableSearchModel.toString());

output

{name:false,age:false,summer:false,winter:false,football:false,tennis:false}
{name:true,age:true,summer:false,winter:false,football:true,tennis:false}

Although using an interface presents a different approach, I found it quite intriguing.

.ts

interface Searchdata{
  name: boolean;
  age: boolean;
  summer: boolean;
  winter: boolean;
  football: boolean;
  tennis: boolean;
}

function searchDataNew(): Searchdata {
  return {
    name: false,
    age: false,
    summer: false,
    winter: false,
    football: false,
    tennis: false
  };
}

function searchDataToString(sd: Searchdata) {
  return `{name:${sd.name},age:${sd.age},summer:${sd.summer},winter:${sd.winter},football:${sd.football},tennis:${sd.tennis}}`;    
}

function arrayDataToObjData(arr: Array<{name:string,visible:boolean}>): Searchdata {
  const obj: any = {};
  arr.forEach(element => {
    obj[element.name] = element.visible;
  });
  return obj;
}

const permPageData = [
  {
    "name": "name",
    "visible": true,
  },
  {
    "name": "age",
    "visible": true
  }, {
    "name": "football",
    "visible": true
  }
];

const tableSearchModel: Searchdata = {
  ...searchDataNew(),
  ...arrayDataToObjData(permPageData)
};
console.log(searchDataToString(tableSearchModel));

result

{name:true,age:true,summer:false,winter:false,football:true,tennis:false}

Dynamically assigning values to class properties in Angular with Typescript is a powerful

Answer №1

Similar questions

What is the best way to retrieve a value from a JSON object using AngularJS?

Is the sudden disconnection from Chrome after a WebSocket handshake related to a domain mismatch or is it possibly a bug in Chrome?

Utilizing Javascript to implement a tooltip feature for dynamically inserted text

Troubleshooting IE Freezing Issue Due to JavaScript Code with .addClass and .removeClass

Tips on changing the date format in Typescript to the desired format

Display only the selected index and conceal the rest

Error: The query has already been processed:

JavaScript parameter not found

Initiating the accordion feature requires two clicks and triggers an rotation of the icon

Avoid having Masonry load all divs simultaneously

What is the best way to iterate through an array and dynamically output the values?

Encountering difficulties in retrieving the JSON data from the web service

Respond to a recommendation with a response

JavaScript problem with hovering action causing additional buttons to appear

Encountering an error when attempting to parse a JSON Object in Java from an AJAX call

Javascript cards arranged in descending order

Tips on how to obtain the element reference while using v-if in Vue

Troubleshooting the Ineffective Replace Method in React Component

Defining variables within a jQuery function

What causes a ReactJS component to disappear upon page refresh?