JSON to Class Object in Angular

Question

I have a model class with default values

export class Person {
    _index : string ="hello";
    _type : string;
    _id : string;
    _score : number;
    _source : Source = new Source();
}
export class Source {
    name : string;
    age : number = 0;
    salary : number;
    details : Details = new Details();
}

export class Details{
    year : number = 1997;
    education : Education = new Education;
}


export class Education{
    score:number = 98;
}

This builds up an object when I create an instance per : Person = new Person ();.

{
"_index":"hello",
"_source":{
"age":0,
"details":{
"year":1997,
"education":{
"score":98
}
}
}

Now I have got JSON Model from server in the model

}
"_index":"person",
"_type":"single",
"_id":"AWCoCbZwiyu3OzMFZ_P9",
"_version":2,
"found":true,
"_source":{
"name":"sauravss",
"age":"21",
"salary":"50000"
}
}

I want to fill the values to my class object but when I subscribe my class object with the result, it changes my class object to the form of JSON object and eliminating the default values giving me the Model that I received from server as the just above JSON. I get this form in per after I subscribe.

What I want is the JSON object must fill the class Object with the fields it matches and the unmatched fields must contain the default values.

editPerson():void {
    const id : string = this.route.snapshot.paramMap.get('id');
    console.log(id);
    this.personService.getPerson(id).subscribe(person => {
      this.per = person;
    });
  }

  getPerson (id : string): Observable<Person> {
    const url = `${this.url}/${id}`;
    console.log(id);
    return this.http.get<Person>(url);
  }

get<Person> doesn't do any casting or conversion, it's just an assertion. If you want to convert the object resulting from the JSON to a specific class, do so explicitly. — jonrsharpe
– jonrsharpe, Commented Feb 1, 2018 at 7:52
See e.g. stackoverflow.com/q/46839214/3001761, stackoverflow.com/q/48102824/3001761, ... — jonrsharpe
– jonrsharpe, Commented Feb 1, 2018 at 8:00

Roberto Zvjerković · Accepted Answer · 2018-02-01 08:11:55Z

0

You need to explicitely convert your Json object to the class you need.

You can do it in constructor:

export class Person() {
    // ...
    constructor(jsonString: string) {
        const jsonData = JSON.parse(jsonString);
        // do your assignment from jsonData
    }
}

answered Feb 1, 2018 at 8:11

Roberto Zvjerković

10.2k4 gold badges31 silver badges49 bronze badges

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

5 Comments

saurav sarkar Over a year ago

Yes this was one solution but is there any easier way of typecasting directly ?

Roberto Zvjerković Over a year ago

No. How would JS even know which Json value to assign to which of your fields?

saurav sarkar Over a year ago

ok thanks ritaj.I just went into the fundamentals of JS as I am new to JS !!

Roberto Zvjerković Over a year ago

No problem. You should accept the answer that solved your question.

jonrsharpe Over a year ago

"How would JS even know which Json value to assign to which of your fields?" - they have the same name?

saurav sarkar · Accepted Answer · 2018-02-01 09:54:51Z

0

This is the work around for now.This would help who are new to angular. If there is a better solution Please [comment].

export class Person {
    _index : string;
    _type : string;
    _id : string;
    _source : Source = new Source();

    constructor (res : Person){
        this._id = res._id;
        this._index = res._index;
        this._type = res._type;
        if(res._source){
            this._source.name = res._source.name;
            this._source.age = res._source.age;
            this._source.salary = res._source.salary;
            if(res._source.details){
                this._source.details.year = res._source.details.year;
                if(res._source.details.education){
                    this._source.details.education = res._source.details.education;
                }
            }
        }
    }
}
export class Source {
    name : string = '';
    age : number = 0;
    salary : number = 0;
    details : Details = new Details();
}

export class Details{
    year : number = 1997;
    education : Education = new Education;
}


export class Education{
    score:number = 98;
}

answered Feb 1, 2018 at 9:54

saurav sarkar

2272 silver badges8 bronze badges

1 Comment

jonrsharpe Over a year ago

Doing it in the constructor is a horrible idea - did it not seem weird to pass the constructor an instance of its own class? Make a static method or a standalone function, and pass each value as a separate argument to the constructor, or just use Object.assign to add the fields from the JSON into a new instance of the class.

Collectives™ on Stack Overflow

JSON to Class Object in Angular

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related