Angular Typescript assign values to class properties dynamically

Question

I have a class and a json object I want the the items in the json object to update the new class. Using Angular 9

class

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

and the json

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

]

Json does not always have the same number of elements as the class has properties but if solves it easier it can have all the same number of items. I have tried a number of solutions so for illustrative purposes I below is how I envisaged it 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;
}

You could use a class transformer to convert plain json to class object. You can use plainToClass from github.com/typestack/class-transformer. — printfmyname
– printfmyname, Commented Jun 2, 2020 at 2:36

cabesuon · Accepted Answer · 2020-06-02 08:45:32Z

I think if you are going to use a class to represent your model SearchData, then it should be a method of the SearchData.

Something like this,

.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 it is quite different approach, I had found interface pretty interest.

.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(permPageData2)
};
console.log(searchDataToString(tableSearchModel));

result

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

I went with your first method as already had original in many places. Did the job thanks

Collectives™ on Stack Overflow

Angular Typescript assign values to class properties dynamically

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related