Is there a way to reset an object's prototype in typescript after fetching it from local storage?

Question

Is there a way to reset an object's prototype in typescript after fetching it from local storage?

In my TypeScript class, there is a method called getTotal() defined on the prototype.

class Score {
    roundOne: any;
    roundTwo: any;
    roundThree: any;
    roundFour: any;
    roundFive: any;
    roundSix: any;
    roundSeven: any;
    getTotal() {
      let total = 0;
      if(!isNaN(parseInt(this.roundOne))) total+=parseInt(this.roundOne);
      if(!isNaN(parseInt(this.roundTwo))) total+=parseInt(this.roundTwo);
      if(!isNaN(parseInt(this.roundThree))) total+=parseInt(this.roundThree);
      if(!isNaN(parseInt(this.roundFour))) total+=parseInt(this.roundFour);
      if(!isNaN(parseInt(this.roundFive))) total+=parseInt(this.roundFive);
      if(!isNaN(parseInt(this.roundSix))) total+=parseInt(this.roundSix);
      if(!isNaN(parseInt(this.roundSeven))) total+=parseInt(this.roundSeven);

      return total;
    }
}

Everything works fine with the method until I store an instance of 'Score' in localStorage and then try to retrieve it. The problem is that the object loses its prototype, resulting in the getTotal() method becoming inaccessible. Apart from changing the structure of my code, I'm wondering if there is a way to reattach or point the objects back to their prototype once retrieved from localStorage. Is there a solution similar to the following:

let scores = JSON.parse(localStorage.getItem('scores'));

scores.forEach(function(score){
  // reattach or point to prototype here
})

javascript angular typescript

Answer 1

Answer №1

When parsing a JSON, it doesn't create instances of classes but rather simple JavaScript objects with the same properties.

There are two main approaches to handling this:
(1) Implement a constructor that can manage the state object:

class Score {
    roundOne: any;
    roundTwo: any;
    ...

    constructor(state: Score) {
        this.roundOne = state.roundOne;
        this.roundTwo = state.roundTwo;
        ...
    }

    getTotal() {
        ...
    }
}

let scores = (JSON.parse(localStorage.getItem('scores')) as Score[])
    .map(score => new Score(score));

It's important to note that even though the type Score is used for the state objects, they simply share the same structure (excluding the method). You can create an interface for this purpose as well:

interface State {
    roundOne: any;
    roundTwo: any;
    ...
}

(2) Alternatively, utilize Object.assign:

let scores = (JSON.parse(localStorage.getItem('scores')) as Score[])
    .map(score => Object.assign(new Score(), score));

Answer 2

When parsing a JSON, it doesn't create instances of classes but rather simple JavaScript objects with the same properties.

There are two main approaches to handling this:
(1) Implement a constructor that can manage the state object:

class Score {
    roundOne: any;
    roundTwo: any;
    ...

    constructor(state: Score) {
        this.roundOne = state.roundOne;
        this.roundTwo = state.roundTwo;
        ...
    }

    getTotal() {
        ...
    }
}

let scores = (JSON.parse(localStorage.getItem('scores')) as Score[])
    .map(score => new Score(score));

It's important to note that even though the type Score is used for the state objects, they simply share the same structure (excluding the method). You can create an interface for this purpose as well:

interface State {
    roundOne: any;
    roundTwo: any;
    ...
}

(2) Alternatively, utilize Object.assign:

let scores = (JSON.parse(localStorage.getItem('scores')) as Score[])
    .map(score => Object.assign(new Score(), score));

Is there a way to reset an object's prototype in typescript after fetching it from local storage?

Answer №1

Similar questions

data retrieval not refreshing sorting post construction

Personalize the loading bar using JavaScript

What is the process for incorporating a personalized inputComponent JSX <input /> into a react-phone-number-input PhoneInput component?

Is it possible to create floating unordered lists using Bootstrap in HTML?

Is there a way to use JavaScript or jQuery to identify if Firefox is blocking mixed content

What is the best way to include variable child directives within a parent directive in AngularJS?

What is the best way to display a default image in a kendo grid when the image field is empty?

How to Retrieve Content from an iFrame Using jQuery?

AngularJS does not allow empty spaces in textarea inputs

Hide a div element upon selecting an option from a dropdown menu

Transmit parameters via onclick event on FullCalendar

transformation of categorized unions in software development

Tips for utilizing maps in a react component within a Next.js application

Dispatching identification to controller after submission

Transforming an ES6 JSON object into a dictionary: a step-by-step guide

javascript/AngularJS - make elements gradually disappear

Capture and store the current ionic toggle status in real-time to send to the database

Trapped in a Continuous Observing Loop with MdSnackBar in Angular Material within Angular 2

redactor.js: Disable backspace functionality when cursor is at the start of a div-container

The Express GET route does not support parameters or additional paths