Clone instance with getter/setter field decorations - json

Question

I have a class which is populated as such (from json):
export class blogEntry {
hasImage: boolean;
#newItem(Video) video: Video;
#newItem(Author) author: Author;
#newItem(Comments) comments: Comments;
#newItem(Picture) blogImage: Picture;
#newItem(PictureCaption) pictureCaption: PictureCaption;
#newItem(TextSummary) summary: TextSummary;
constructor(data: blogEntry|Object) {
Object.assign(this, data);
}
}
Where the decorator is defined as such (in a seperate file):
export function newItem<T extends EditablePart>(type) {
return function(target: Object, propertyKey) {
let value: T;
Object.defineProperty(target, propertyKey, {
get: function(): T {
return value;
},
set: function(newVal: T) {
if (newVal) {
value = construct(type, newVal);
}
},
enumerable: true
});
}
}
export function construct<T extends EditablePart>(type: { new(...args : any[]): T ;}, newVal) {
return new type(newVal);
}
All annotated types extend EditablePart.
After using this class to change the data (by using the annotated fields, i.e. via the getters/setters supplied there), i want to save the class data as json to my backend server. Before introducing the decorators in the class I could just use:
publish(): blogEntry {
return new blogEntry(this);
}
Now I only get hasImage. When using developer tools in chrome I can see the fields but I have to click the dots behind them ('invoke property getter') to retrieve the data.
Any thought how to clone the class (I want to continue using the class)? Any help would be greatly appreciated!

Answer 1

It occurs to me use JSON.stringify(...) and a custom function that helps you resolve directives before.
The function would be a replacer function according stringify documentation.
Example: I have a component I would like to save in BD. My component have a ViewChild decorator and I want to save it too. I know that my ViewChild is an ElementRef but I wouldn't like to save a structure like this:
{
nativeElement: {}
}
The above is resulted of my JSON.stringify(...) function when it gets my ViewChild property so my replacer function comes in action.
JSON.stringify(this, function(key, value) {
const isViewChild = value.nativeElement; // This is for identifying a ViewChild.
if (isViewChild) {
return isViewChild.innerHTML; // I want to resolve it with HTML only.
}
return value;
});
Now, my viewchild looks as follow:
{
...other properties,
myViewChild: '<div>My viewchild translated to html</div>'
}
Other approach is overriding the toJSON function. Using my component again:
#Component({...})
export class MyComponent {
#ViewChild('mySon') myViewChild: ElementRef<any>;
...other properties
toJSON() {
return { myViewChild: this.myViewChild.nativeElement.innerHTML, ...otherProps };
}
}
And when you JSON.stringify the component you are going to get your component with directives resolved.
Try it!