Angular/Http "put" method only returning undefined?

Question

I've been trying to make a very basic app pulling user information from a .json file and "logging them in", and have a json storing whether a user is logged into the app and their user ID. I'm stuck on a method which would take the given email and password, match them to an entry in the users json, then update the login json with the new information (login true, and user ID.) This is what I have so far in the method:

setUserLogIn(email, password):any{
if (this.users){
  this.users.forEach(foundUser => {
  if (foundUser.email === email && foundUser.password === password){
    this.currentUser=foundUser;

    let login:Login = {"id": 1, "loginStatus":true, "userId":foundUser.id}
    return this.httpService.put<Observable<any>>('http://localhost:7800/loginCheck/1', login)
      .pipe(map((log:Observable<Login>) =>{
        console.log(log) //this isn't reached, never prints in console
        if (log !== undefined){
          return true;
        }
        return false;
      }))
    }
    if (this.currentUser != null){
      FetchUserService.isLoggedIn = true;
    } else{
      FetchUserService.isLoggedIn = false;
    }
})

} }

From my previous tests I know everything else in the method works correctly, just the put only returns undefined. I am subscribing to the method in the controller:

this.fetchUserService.setUserLogIn(this.userEmail, this.userPassword).subscribe(data => {
  console.log(data);
})

This method of subscription returns an error. I also tried subscribing in the service itself, like:

return this.httpService.put<Observable<any>>('http://localhost:7800/loginCheck/1', login)
      .pipe(map((log:Observable<Login>) =>{
        console.log(log)
        if (log !== undefined){
          log.subscribe(data => {
            return data
          })

Taking this into the component and logging the result also just returns undefined.

Any suggestions? I have no idea what I'm doing wrong, after searching put methods for the past few hours I can't see any differences in what I have there. Any help is greatly appreciated!

The `setUserLogIn` doesn't return anything, when you subscribe to it in the component, are you getting subscribe not found on undefined. — Nikhil Walvekar, Mar 18 '21 at 06:27

score 0 · Answer 1 · answered Mar 18 '21 at 08:00

There are multiple issues here.

Parallel subscriptions. Avoid them if possible. Here you could use forkJoin to combine all observables and trigger them in parallel.
Why would an HTTP request emit an Observable as it's response? Most probably it wouldn't.
Currently you aren't returning anything from the function.

Try the following

setUserLogIn (email, password): Observable<any> {    // <-- return `Observable` here
  if (!this.users) return NEVER;

  return forkJoin(
    this.users.map(foundUser => {
      if (foundUser.email === email && foundUser.password === password) {
        this.currentUser = foundUser;
        FetchUserService.isLoggedIn = true;

        let login: Login = {
          "id": 1,
          "loginStatus": true,
          "userId": foundUser.id
        };
        return this.httpService.put('http://localhost:7800/loginCheck/1', login).pipe(
          map((log: Login) => {    // why would an HTTP request emit an observable?
            console.log(log);
            return (!!log);
          })
        );
      }
      FetchUserService.isLoggedIn = false;
      return EMPTY;     // `forkJoin` emits only when all observables complete
    })
  );
}

Ah, thank you! I'm pretty new to http requests, still not sure what should return what. This code seems to work, but only on the second execution which is odd. The console.log(log) after the put line also doesn't execute still, is there a reason this isn't reached? Edit: I just noticed on the first execution the returned value (on subscribing in the controller) is an object of the data, while the second execution returns just the values of the object, if that helps. — Kroob, Mar 18 '21 at 16:41

Angular/Http "put" method only returning undefined?

1 Answers1