CODEWITHSUNDEEP
angularspring
kipa99
kipa99

Reputation: 17

Unfefined status using a class field in Angular

The problem is concerned about display fields of class in html view or in console. My config:

export class UserDataService {

  constructor(
    private http:HttpClient
  ) { }

  executeHelloUserBeanService(){
    return this.http.get<User>("http://localhost:8081/physio-node/test/admin");
  }
}

The object that is being passed on from Spring:

public class UserDTO {
    public String username;
    public String email;

    public UserDTO(User user) {
        this.username = user.getUserName();
        this.email = user.getUserE_mail();
    }
}

User model in Angular:

export class User {
 public username: string;
 public email: string;

 
    constructor(username: string, email: string){
      this.username = username;
      this.email = email;
    }
  }


export class ProfileComponent implements OnInit {
  user: User;
  name: string = "true";

  constructor(
    private service:UserDataService
  ) { }

  ngOnInit(): void {
    this.refreshProfile();
  }

   refreshProfile(){
    this.service.executeHelloUserBeanService().subscribe(
      response => {
        this.user = response;
        console.log(this.user);
        console.log(this.user.username);
      }
    )
  }

So, console.log(this.user) seems correct because I can see the full object in the console Console

but when i try to display {{user.username}} in html view it doesn't work and console in line: console.log(this.user.username) displays: undefined;

@edit

public class UserService {

    private UserTaskRepository userTaskRepository;

    public UserService(UserTaskRepository userTaskRepository) {
        this.userTaskRepository = userTaskRepository;
    }

    public UserDTO getUserbyID(String username){
        return userTaskRepository.findByUserName(username)
                .stream().
                        map(UserDTO::new).
                        collect(Collectors.toList()).get(0);
    }




}

Upvotes: 0

Views: 47

Answers (2)

Suneel Kumar
Suneel Kumar

Reputation: 779

In attached screenshot, It's clearing showing that the response is not single an object It's an array of User Object. So either you have to change the implementation of backend like return single object instead of array or change the implementation of this refreshProfile() method like this

refreshProfile(){
    this.service.executeHelloUserBeanService().subscribe(
      response => {
        this.user = response[0]; // just read first element from response
        console.log(this.user);
        console.log(this.user.username);
      }
    )
  }

Upvotes: 1

OctavianM
OctavianM

Reputation: 4597

The response from the server seems to be an array of users, not a single user as you expect. You can either correct that on the backend side, or extract the first element from the response data:

executeHelloUserBeanService(){
    return this.http.get<User[]>("http://localhost:8081/physio-node/test/admin").pipe(
      // make sure the array is there and it has at least 1 element
      filter(res => res && res.length > 0),
      // extract the first element
      map(res => res[0])
    );
  }

Upvotes: 1

Related Questions