Problem in request get Observable in Angular

Question

i have a problem .

I have these service and this call:

    getUsers(): Observable<Users> {
    this.spinner.show();
    const options: Options = {
      type: 'get',
      path: '/users?page=2' ,
      
    };
    return this.apiCall.call(options).pipe(
       map((res) => {
        console.log('El servicio de usuarios funciona', res);
         
      }), 
      finalize(() => {
        this.spinner.hide();
      }),
      catchError((er) => this.apiCall.handleError(er))
    );
  }

this service gives me this result in console: console object

so it works

but in the component I can't resolve and obtain that object to be able to also take the array that is in that object i need 'allUsers' array

    export class DashboardComponent implements OnInit {
      stateForm: Props = new Props();
      user?: SocialUser;
      socialUser!: SocialUser;
      loggedIn: boolean;
      users: Users;
      allUsers: UserBody[];
    
      constructor(
        private router: Router,
        private authService2: SocialAuthService,
        private authService: AuthService,
      ) { }
      ngOnInit(): void {
        this.initForm();
      }
    
      /**
       * initForm
       * initialize the form
       */
      initForm(): void {
        this.authService2.authState.subscribe((user) => {
          this.user = user;
          this.loggedIn = (user != null);
        });
        if (!this.user) {
          this.user = JSON.parse(localStorage.getItem('user'));
        }
        this.getUsers(); 
        // console.log(this.getUsers());
        // this.users.data?.forEach(user => {
        //   this.allUsers.push(user);
        // }
        // )
      }
      getUsers(): void {
          this.authService
          .getUsers()
          .pipe(
            first(),
            tap({
              next: (userData) => {     
              },
              error: () => {
                
                this.stateForm.error = 'Invalid Login';
              },
            })
          )
          .subscribe( );
      }

allUsers Model is the data on the object Json the json is https://reqres.in/api/users?page=2 so I need to fix it so that the array has the data of 'data' array

tahnks for all ^^

Nicholas Tower · Accepted Answer · 2022-05-24 19:26:26Z

1

map((res) => {
  console.log('El servicio de usuarios funciona', res);         
})

Since you don't have a return statement, this is implicitly returning undefined, and so you've mapped the observable into just emitting undefined.

I would switch to tap, so that you can run your logging without changing what values are going through the pipeline.

tap((res) => {
  console.log('El servicio de usuarios funciona', res);         
})

Alternatively, you could keep the map and add return res, though a map that runs side effects and doesn't change anything is not really what map is meant for.

map((res) => {
  console.log('El servicio de usuarios funciona', res);   
  return res;      
})

answered May 24, 2022 at 19:26

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problem in request get Observable in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related