My current situation involves an observable that retrieves data from a server. This data is stored in the public fields of a DocGroup object.
export class DocGroup extends Selectable {
public uuid;
public name;
public set_uuid;
public order;
public strings;
}
To add extra functionality to this object, I have extended it with a class named Selectable. This extension allows my object to be selected for further processing.
export class Selectable {
public readonly isSelectable = true;
public selection_parent: Selectable;
protected _selected: number = -1;
public select(state?: boolean) {
// Implementation here
}
// Additional methods go here
}
The issue arises when parsing this object with JSON as it lacks parent fields and methods despite its specified type. When attempting to call its select() method, an exception "group.select is not a function" is thrown. The object is retrieved using the following method:
public getAll(contract: Contract): Observable<DocGroup[]> {
const url = this.baseUrl + 'getAll';
const response: Observable<DocGroup[]> = this.http.post<DocGroup[]>(url,
{"contract_uuid": contract.uuid}, this.httpOptions);
return response;
}
After inspecting the printed object in the console, it became apparent that it was missing parent fields as well:
{
"uuid":"3fe5329a-888c-4a59-e99b-aa5b8c5791dc",
"set_uuid":"6c8d33c3-c147-4d36-db0d-e41f7d9b87b3",
"order": null,
"name":"Group 1"
}
How can I ensure that my HTTP-retrieved object contains all necessary methods and fields? Could making Selectable an interface instead help resolve this issue caused by potentially breaking design patterns?
I have attempted using Object.assign() to adjust the object, but it only populated missing fields, not methods.