Acquiring the class function from a service which yields a model

Question

Acquiring the class function from a service which yields a model

Within my class called userName, I have defined properties that form a model when casting from json. Additionally, this class includes a simple function that returns the full Name:

export class userName {
    firstName: string;
    lastName: string;
    get fullName() {
     return `${this.firstName} ${this.LastName}`
    }

In my service, I have a method that retrieves a collection of users:

getUsers() : Observable<userName[]>
{
 return this.http.get<userName[]>(<path>);
}

After retrieving the collection from the service in the component, I want to display the firstName + LastName together like the fullName property does, even though it is not returned by the service. Is there a way to achieve this without creating a custom extension?

javascript angular typescript es6-class

Answer 1

Answer №1

Utilize the map function when dealing with an object retrieved from a service:

getUsers().pipe(    
    map(user => users.map(user => {
       return {
         firstName: user.firstName,
         lastName: user.lastName,
         fullName: user.firstName + user.lastName   
   }))
);

Answer 2

Utilize the map function when dealing with an object retrieved from a service:

getUsers().pipe(    
    map(user => users.map(user => {
       return {
         firstName: user.firstName,
         lastName: user.lastName,
         fullName: user.firstName + user.lastName   
   }))
);

Answer 3

Answer №2

Category:

export class User {
  firstName: string;
  lastName: string;
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  constructor(firstName: string, lastName: string) {
    Object.assign(this, { firstName, lastName });
  }
}

Function:

retrieveUsers() : Observable<User[]> {
    return this.http.get<User[]>(<url>).pipe(map((user: User) => new User(user.firstName, user.lastName)));
  }

Answer 4

Category:

export class User {
  firstName: string;
  lastName: string;
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  constructor(firstName: string, lastName: string) {
    Object.assign(this, { firstName, lastName });
  }
}

Function:

retrieveUsers() : Observable<User[]> {
    return this.http.get<User[]>(<url>).pipe(map((user: User) => new User(user.firstName, user.lastName)));
  }

Answer 5

Answer №3

Enhance userName class with a new constructor method:

export class userName {
    firstName: string;
    lastName: string;
    get fullName() {
     return `${this.firstName} ${this.LastName}`
    }

    constructor(jsonObject = {}) {
      this.firstName = jsonObject.firstName ? jsonObject.firstName : null;
      this.lastName  = jsonObject.lastName ? jsonObject.lastName : null;
    }
}

Utilize the http observable response and map it to your custom object

this.usersService.getUsers()
  .pipe(
    map(res => {
      return res.map((item) => new userName(item));
    })
  )
  .subscribe(users => {
    // console.log(users[0].fullName)
  })

Answer 6

Enhance userName class with a new constructor method:

export class userName {
    firstName: string;
    lastName: string;
    get fullName() {
     return `${this.firstName} ${this.LastName}`
    }

    constructor(jsonObject = {}) {
      this.firstName = jsonObject.firstName ? jsonObject.firstName : null;
      this.lastName  = jsonObject.lastName ? jsonObject.lastName : null;
    }
}

Utilize the http observable response and map it to your custom object

this.usersService.getUsers()
  .pipe(
    map(res => {
      return res.map((item) => new userName(item));
    })
  )
  .subscribe(users => {
    // console.log(users[0].fullName)
  })

Acquiring the class function from a service which yields a model

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to use jQuery to set the height of one div equal to another div

Issues with debuggers in Chrome and Firefox with AngularJS are causing frustration for developers

Error encountered while rendering HTML template with Django and AngularJS due to TemplateSyntaxError

How can a JQuery slideshow be programmed to only iterate once?

Ways to populate an Angular Material chips array during initialization

What is the best way to retrieve scope variables from multiple directives?

I am facing an issue with the Tailwind Flowbite Datepicker dropdown UI when running "npm run prod" for minification. The class is not being added during minification on the npm

Angular is a powerful framework that enables the creation of dynamic user interfaces. One of its many

Angular - Set value only if property is present

Tips for showing/hiding textboxes based on select options:

Avoid inputting numbers and special characters

Is there a distinction in functionality when utilizing fat arrow syntax versus traditional syntax for ES6 class methods and React?

Combining selected boxes through merging

Steps for setting the keys of a map as a priority when initializing a state variable in Typescript for a React component

Having Difficulty Applying a Background Color to a Class in Bulk

Validation of Button Groups and Automatic Disabling after Initial Click with HTML, CSS, and JavaScript

To calculate the sum of input field rows that are filled in upon button click using predetermined values (HTML, CSS, JavaScript)

Iterate over the HTML elements within a class and retrieve a specific property in JSON

The error message states that `article.createdAt.toLocalDateString` is not a valid

The parent component can successfully call the setState function, but for some reason, the