When assigning JSON to a class object, the local functions within the class became damaged

Question

When assigning JSON to a class object, the local functions within the class became damaged

This is a demonstration of Object Oriented Programming in JavaScript where we have a parent Class called Book with a child class named PriceDetails.

export class Book {
  name: String;
  author: String;
  series: String;
  priceDetails: Array<Price>;
}

// This is the child class

export class Price {
    price1: Number; 
    price2: Number;
    price3: Number;
    price4: Number;
    price5: Number;
    price6: Number;
    price7: Number; 
    public setPrice(columnNumber:number, newPrice:number) {     
        this["price"+ columnNumber] = newPrice;  
    }   
}

We are fetching data from an API endpoint:

this.http.get(this.booksUrl)
  .subscribe(res => console.log(res));

The JSON response received looks like this:

{
    "name": "Apple",
    "author": "Shaik",
    "series": "Classic",
    "priceDetails": [
                    {
                        "price1": 1, 
                        "price2": 2, 
                        "price3": 3, 
                        "price4": 4, 
                        "price5": 7, 
                        "price6": 10, 
                        "price7": 8, 
                      },
                      {
                        "price1": 11, 
                        "price2": 22, 
                        "price3": 23, 
                        "price4": 34, 
                        "price5": 37, 
                        "price6": 10, 
                        "price7": 38, 
                      }, 
                      {
                        "price1": 31, 
                        "price2": 33, 
                        "price3": 24, 
                        "price4": 34, 
                        "price5": 37, 
                        "price6": 10, 
                        "price7": 38, 
                      }
                ],
}

However, when trying to call a local function after receiving the JSON data, an error occurs:

this.Book.priceDetails[0].setobj(1, 15)

The error message states - core.js:12301 ERROR Error: Uncaught (in promise): TypeError: this.Book.priceDetails[0].setobj is not a function

javascript typescript

Answer 1

Answer №1

When dealing with JSON data from the server, it is important to note that the output of JSON.parse method will always be an array, object, number, or string unless a reviver parameter is specified. This means that the result will not be an instance of your custom classes like Book or price.

To address this issue, you can create copy constructors for your classes and pass the received values to them. For example:

export class price
{
    constructor(source: price){
      this.price1 = source.price1;
      this.price2 = source.price2;
      this.price3 = source.price3;
      this.price4 = source.price4;
      this.price5 = source.price5;
      this.price6 = source.price6;
      this.price7 = source.price7;
    }
    price1: Number; 
    price2: Number;
    price3: Number;
    price4: Number;
    price5: Number;
    price6: Number;
    price7: Number; 
    public setPrice( lcol:number,lnprice:number)
    {     
        this["price"+ lcol]=  lnprice;  
    }
}

and

export class Book
{
    constructor(source: price){
      this.name= source.name;
      this.author= source.author;
      this.series= source.series;
      this.priceDetails= source.priceDetails && source.priceDetails.map(a=>new price(a));
    }
  name: String;
  author: String;
  series: String;

  priceDetails: Array<price>;

}

You can then use these classes like so:

this.http.get(this.booksUrl).pipe(map(a => new Book(a))).subscribe(res => console.log(res));

Answer 2

When dealing with JSON data from the server, it is important to note that the output of JSON.parse method will always be an array, object, number, or string unless a reviver parameter is specified. This means that the result will not be an instance of your custom classes like Book or price.

To address this issue, you can create copy constructors for your classes and pass the received values to them. For example:

export class price
{
    constructor(source: price){
      this.price1 = source.price1;
      this.price2 = source.price2;
      this.price3 = source.price3;
      this.price4 = source.price4;
      this.price5 = source.price5;
      this.price6 = source.price6;
      this.price7 = source.price7;
    }
    price1: Number; 
    price2: Number;
    price3: Number;
    price4: Number;
    price5: Number;
    price6: Number;
    price7: Number; 
    public setPrice( lcol:number,lnprice:number)
    {     
        this["price"+ lcol]=  lnprice;  
    }
}

and

export class Book
{
    constructor(source: price){
      this.name= source.name;
      this.author= source.author;
      this.series= source.series;
      this.priceDetails= source.priceDetails && source.priceDetails.map(a=>new price(a));
    }
  name: String;
  author: String;
  series: String;

  priceDetails: Array<price>;

}

You can then use these classes like so:

this.http.get(this.booksUrl).pipe(map(a => new Book(a))).subscribe(res => console.log(res));

Answer 3

Answer №2

It appears that the setobj() method may not be present in the class price since only setPrice() is visible. Another possibility is that during retrieval of book data from the http request, you might be overwriting your pricedetails array with a simpler object structure, lacking the setobj() function:

{
  "price1": Number, 
  "price2": Number, 
  "price3": Number, 
  "price4": Number, 
  "price5": Number, 
  "price6": Number, 
  "price7": Number, 
  public setobj();
}

This could potentially result in losing access to the setobj() method which seems crucial for managing price objects.

If this is indeed the issue, consider using constructors as a solution and ensure to check and maintain the integrity of your data structures throughout the process.

Additionally, providing more code snippets for review would greatly assist in identifying potential solutions or modifications needed for resolving this issue effectively.

Answer 4

It appears that the setobj() method may not be present in the class price since only setPrice() is visible. Another possibility is that during retrieval of book data from the http request, you might be overwriting your pricedetails array with a simpler object structure, lacking the setobj() function:

{
  "price1": Number, 
  "price2": Number, 
  "price3": Number, 
  "price4": Number, 
  "price5": Number, 
  "price6": Number, 
  "price7": Number, 
  public setobj();
}

This could potentially result in losing access to the setobj() method which seems crucial for managing price objects.

If this is indeed the issue, consider using constructors as a solution and ensure to check and maintain the integrity of your data structures throughout the process.

Additionally, providing more code snippets for review would greatly assist in identifying potential solutions or modifications needed for resolving this issue effectively.

When assigning JSON to a class object, the local functions within the class became damaged

Answer №1

Answer №2

Similar questions

Personalized Jasmine matchers for a Protractor/WebDriverJS component

Format the date using the Datepicker

When useEffects are linked in such a way that the first one updates a dependency of the second, it can lead to

What is the best way to send a promise back from my service to my controller?

The element.find() function is experiencing issues when utilizing a templateUrl within a directive

Trouble with toggling div visibility using jQuery and AJAX

I'm having trouble asynchronously adding a row to a table using the @angular/material:table schematic

Unexpected behavior: Angular4/Javascript Date object alters when timezone is specified in Date constructor

Error: Unable to simplify version range

Using the Gmail API to retrieve the access token details by extracting the "code" parameter from the URL of a pop-up window

Refresh all tabs in the TabContainer

Having difficulties with Vue components displaying in Laravel's blade.php file

Error detected in JSON syntax... Where is it hiding?

What is the best way to determine the total of values from user-input fields that are created dynamically

Retrieving information in JSON format

Guide to dynamically setting SCSS $variables in JavaScript after retrieving them from local storage in a React application

Obtaining a file using capybara independently of rails

Stop music with one click, code in Javascript

The Vue event was triggered, however there was no response

Generate new variables based on the data received from an ajax call