What is the best way to display data in the view using Angular 5 by utilizing models, classes, or interfaces?

Question

What is the best way to display data in the view using Angular 5 by utilizing models, classes, or interfaces?

I am facing an issue while trying to display the data fetched from my backend. I have created a class to handle the data:

When I request the User by ID URI, the returned data looks like this:

https://i.sstatic.net/76BSY.jpg

Similarly, when I request all Users using another URI, the data is returned in the following format:

https://i.sstatic.net/5Aetm.jpg

I have implemented two functions in my service:

    getUserProfile(id): Promise<void | UserProfile> {
        let url = URL_SERVICIOS + '/users/' + id;
        let token2 = localStorage.getItem("TOKEN");
        let headers = new Headers();
        headers.append('Authorization', 'Bearer ' + token2);
        let options = new RequestOptions({headers: headers});

        return this.http.get(url, options)
          .toPromise()
          .then(response => response.json().result as UserProfile)
          .catch(this.handleError);
      }


  getUserProfileS(sort = '-createdAt'): Promise<void | UserProfile[]> {
    let url = URL_SERVICIOS + '/users/'
    return this.http.get(url)
      .toPromise()
      .then(response => response.json() as UserProfile[])
      .catch(this.handleError);
  }

In my component, I have the following code:

 usuario:UserProfile;

 this._ups.getUserProfile(id).then((user:UserProfile)=>{
     alert("USUARIO"+JSON.stringify(user));
     console.log(JSON.stringify(user));
     this.usuario=user;
     console.log(this.usuario.city);
   }).catch(err=>{
     console.log("ERROR"+err);
   })

The problem arises when I try to display the user's name in my view:

<h1>{{usuario.name}}</h1>

I receive an error message stating "Cannot read property 'name' of undefined", and I cannot pinpoint the error in my code.

Furthermore, I'm unsure whether I should be using interfaces or classes for this purpose.

The structure of my class 'UserProfile' is as follows:

 export class UserProfile {
  id: number;
  photoProfile?: any;
  id_facebook?: any;
  name: string;
  surname: string;
  email: string;
  password: string;
  latitude: number;
  longitude: number;
  country_code: string;
  telephone: string;
  city: string;
  birth: number;
  photo_profile?: any;
  gender: string;
  who_is?: any;
  roles?: any;

  constructor(values: Object = {}) {
    Object.assign(this, values);
  }
}

javascript angular typescript

Answer 1

Answer №1

After your request, I have refactored your code to utilize RxJS Observables instead of Promises. Keep in mind that I haven't tested it yet, so if any errors are displayed, simply follow the instructions provided. Additionally, error handling is not included here as it is straightforward with Observables. It can serve as a beneficial exercise for you too. Here's how you can implement this using observables:

Create a service that will return a RxJS Observable rather than a promise:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import { UserProfile } from 'USER_PROFILE_PATH';


@Injectable()
export class UserService {
URL_SERVICES = YOUR_URL_HERE;


constructor(
  private http: HttpClient,
) { }


getUserProfile(id): Observable<UserProfile> {
    const url = `${URL_SERVICES}/users/${id}`;
    const token2 = localStorage.getItem("TOKEN");
    const headers = new HttpHeaders();
    headers.append('Authorization', `Bearer ${token2}`);
    const options = new RequestOptions({headers: headers});

    return this.http.get(url, options);
}

Your component that will receive the observable:

import { Component, OnInit } from '@angular/core';

import { UserProfile } from 'USER_PROFILE_PATH';
import { UserService } from 'USER_SERVICE_PATH';

@Component({
  selector: 'app-your',
  templateUrl: './your.component.html',
  styleUrls: ['./your.component.css']
})
export class YourComponent implements OnInit {

  user: UserProfile;

  id = SOME_ID_HERE;

  constructor(private userService: UserService) { }

  getUserProfile(): void {
    this.userService.getUserProfile()
        .subscribe(user => this.user = user);
  }

  ngOnInit() {
    this.getUserProfile(this.id);
  }

}

Answer 2

After your request, I have refactored your code to utilize RxJS Observables instead of Promises. Keep in mind that I haven't tested it yet, so if any errors are displayed, simply follow the instructions provided. Additionally, error handling is not included here as it is straightforward with Observables. It can serve as a beneficial exercise for you too. Here's how you can implement this using observables:

Create a service that will return a RxJS Observable rather than a promise:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import { UserProfile } from 'USER_PROFILE_PATH';


@Injectable()
export class UserService {
URL_SERVICES = YOUR_URL_HERE;


constructor(
  private http: HttpClient,
) { }


getUserProfile(id): Observable<UserProfile> {
    const url = `${URL_SERVICES}/users/${id}`;
    const token2 = localStorage.getItem("TOKEN");
    const headers = new HttpHeaders();
    headers.append('Authorization', `Bearer ${token2}`);
    const options = new RequestOptions({headers: headers});

    return this.http.get(url, options);
}

Your component that will receive the observable:

import { Component, OnInit } from '@angular/core';

import { UserProfile } from 'USER_PROFILE_PATH';
import { UserService } from 'USER_SERVICE_PATH';

@Component({
  selector: 'app-your',
  templateUrl: './your.component.html',
  styleUrls: ['./your.component.css']
})
export class YourComponent implements OnInit {

  user: UserProfile;

  id = SOME_ID_HERE;

  constructor(private userService: UserService) { }

  getUserProfile(): void {
    this.userService.getUserProfile()
        .subscribe(user => this.user = user);
  }

  ngOnInit() {
    this.getUserProfile(this.id);
  }

}

Answer 3

Answer №2

When utilizing the promise approach instead of observables, which is my preference,

In your service, make sure to return the promise itself:

getUserProfile(id): Promise<void | UserProfile> {
    let url = URL_SERVICIOS + '/users/' + id;
    let token2 = localStorage.getItem("TOKEN");
    let headers = new Headers();
    headers.append('Authorization', 'Bearer ' + token2);
    let options = new RequestOptions({headers: headers});

    return this.http.get(url, options).toPromise()
}

Then in the component, you can utilize then and access the user.result:

Instead of using this.usuario=user;, opt for this.usuario = user.result;

this._ups.getUserProfile(id).then((user:UserProfile)=>{
     alert("USUARIO"+JSON.stringify(user));
     console.log(JSON.stringify(user));
     this.usuario=user.result;
     console.log(this.usuario.city);
   }).catch(err=>{
     console.log("ERROR"+err);
   })

You can find additional documentation and examples here.

Answer 4

When utilizing the promise approach instead of observables, which is my preference,

In your service, make sure to return the promise itself:

getUserProfile(id): Promise<void | UserProfile> {
    let url = URL_SERVICIOS + '/users/' + id;
    let token2 = localStorage.getItem("TOKEN");
    let headers = new Headers();
    headers.append('Authorization', 'Bearer ' + token2);
    let options = new RequestOptions({headers: headers});

    return this.http.get(url, options).toPromise()
}

Then in the component, you can utilize then and access the user.result:

Instead of using this.usuario=user;, opt for this.usuario = user.result;

this._ups.getUserProfile(id).then((user:UserProfile)=>{
     alert("USUARIO"+JSON.stringify(user));
     console.log(JSON.stringify(user));
     this.usuario=user.result;
     console.log(this.usuario.city);
   }).catch(err=>{
     console.log("ERROR"+err);
   })

You can find additional documentation and examples here.

What is the best way to display data in the view using Angular 5 by utilizing models, classes, or interfaces?

Answer №1

Answer №2

Similar questions

Determine the array with the highest value by comparing multidimensional arrays in JavaScript

Tips on transferring a file (such as PDF, DOC, etc) from a Client application built with React to a server built with Node.js and Express

Encountering an Unexpected Token error while using the getjson function

Optimizing media queries with Angular: A comprehensive guide

Steps to create an if statement using jQuery

How should the directory be organized for the param with a prefix in Nuxt.js?

Harnessing the power of Vue.js within an Nw.js project, sans bundlers: Unveiled

Angular 4 - Seeking clarification on the usage of *ngComponentOutlet

While working in Next.js, I utilized an `<Image />` tag with a link to an image, only to encounter an unexpected error

How to show a div for small screens only using Bootstrap 4 beta?

Creating instances of a child class in Typescript using a static method in the parent class, passing arguments and accessing other static methods

Performing a fetch() POST request in Express.js results in an empty body object being generated

Guide on showcasing an array in a table using DataTables in a single column

Converting important information from elements in an Array into a string separated by commas

AngularJS enables the creation of multiselectable dropdown checkboxes

Potential causes for Chrome to send duplicate requests

Dealing with textarea in Javascript

Is the Vue-portal enabled conditionally?

The error message "TypeError: Unable to access the 'getFullWidth' property of an undefined value when using TSLint and TypeScript" was

Enhancing image search functionality through dynamic HTML updates