Cannot subscribe data from my API backend (angular)

Question

I'm new to angular and ionic and i have to develop an application that can connect to a backend and get users data. The application is able to extract user data, but not to save them in a variable with subscribe method.

The PeopleService:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ReplaySubject } from 'rxjs';
import {map} from 'rxjs/operators';


@Injectable({
  providedIn: 'root',

})


export class PeopleService {

      public activeProject:ReplaySubject<any> = new ReplaySubject(1);
      public people: any;

  constructor(public http: HttpClient ){
    console.log("Ciaooo");
  }

  getPeople() {

        this.http.get('.....................').pipe(map(res => res)).subscribe(res => this.activeProject.next(res));
        return this.activeProject;
  }



}

Home:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
import { Component, OnInit } from '@angular/core';
import {PeopleService} from '../../people-service.service';
import { ReplaySubject } from 'rxjs';


console.log("ouu");
@Component({
  selector: 'app-start-p',
  templateUrl: './start-p.page.html',
  styleUrls: ['./start-p.page.scss'],
  providers: [PeopleService]
})

export class StartPPage implements OnInit {
  //public people : any;

   public people : any;



  constructor(public peopleService : PeopleService){
    console.log("Start p page costruito richiamo loadPeople");
  }

  ngOnInit() {


    this.people = null;
    console.log("loadPeople avviato, provo a inviare richiesta pacchetti a peopleService.getPeople");
    this.peopleService.getPeople();

 
    this.peopleService.activeProject.subscribe(active => {this.people = active, console.log(active)});
    console.log(this.people);
  }

}

The return JSON is like this:

{"people": [{"gender":"female","name":{"title":"miss","first":"willemien","last":"heslinga"},"email":"[email protected]"},{"gender" : "male", "name":{"title":"monsieur","first":"bernard","last":"olivier"},"email":"[email protected]"}]}

My app can read the json file, but can't save it. Runs the console.log but fails to put active in this.people

If you look at Parent and children communicate via a service as an example, you'll see that you wouldn't subscribe directly to a Subject<T>. You would instead expose an observable (asObservable()) based on the subject from the service and subscribe that to that instead. Also, why even use a subject in your example, why not just consume the data of getPeople() directly? — Alexander Staroselsky
– Alexander Staroselsky, Commented Feb 21, 2019 at 22:42

dev-dan · Accepted Answer · 2019-02-21 23:22:28Z

1

I would try restructuring this set up a little to bit to keep it simple and get it working. As mention in the comment lets work on consuming getPeople() directly. Looking like the following. Be sure to import Observable from RxJS.

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

private getPeople():Observable<any> {
 return this.http.get(//filler details//).pipe(map(data => data)
 );
}

Notice the function above is set to return an `Observable' which means in your component you can subscribe to it directly looking like so.

this.peopleService.getPeople().subscribe(data => {
  console.log(data); // is good, should show you people.
}, error => {
  console.log(error); // HttpError will provide error and type.
});

This removes the complicated logic involving the subject while giving you the required functionality. Any issues drop a comment. BR.

edited Feb 21, 2019 at 23:22

answered Feb 21, 2019 at 23:15

dev-dan

6,3333 gold badges27 silver badges46 bronze badges

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

2 Comments

Gioele Giunta Over a year ago

Thankssss, I wrote: this.peopleService.getPeople().subscribe(data => { console.log(data), this.people = data.people; // It Works!! }, error => { console.log(error); // HttpError will provide error and type. });

dev-dan Over a year ago

Glad it helped :- )

Collectives™ on Stack Overflow

Cannot subscribe data from my API backend (angular)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related