CODEWITHSUNDEEP
jsonangularcsvobservablehttpclient
bomab
bomab

Reputation: 1

Angular, httpClient in service retrieves CSV data and sends JSON data to component

I'm trying to create a service in an Angular project that retrieves CSV data from an API server and passes JSON to the component.

The console displays nice JSON data from the service, but the component displays much earlier Component data: UNKNOWN.

I use the csvtojson module to convert CSV to JSON

Component

  getData(): any {
    this.storeService.getData()
      .subscribe(data => {
        console.log('Component data: ', data);
      }, error => {
        console.log(error);
      });
  }

Service "storeService"

  getData(): Observable<any> {
    return this.httpClient
      .get('http://llocalhost:3000/user/11', { responseType: 'text' as 'text' })
      .pipe(
        map((data) => {
          csv({
            noheader: true,
            trim: true,
            delimiter: ';'
          })
            .fromString(data)
            .then(jsonData => {
              // This is OK - I can see a JSON data
              console.log('Service jsonData', jsonData);
              // How to send this jsonData to component?
              return jsonData;
            })
        })
      )
  }

Thanks for your help.

Upvotes: 0

Views: 469

Answers (2)

Msk Satheesh
Msk Satheesh

Reputation: 1536

Try Using:

Just return the data in the service and do your thing in the component as follows

Service.ts

getData(): Observable<any> {
    return this.httpClient
      .get('http://llocalhost:3000/user/11', { responseType: 'text' as 'text' });
}

Component.ts

getData(): any {
    this.storeService.getData()
      .subscribe(data => {
        csv({
            noheader: true,
            trim: true,
            delimiter: ';'
        }).fromString(data).then(jsonData => {
             // This is OK - I can see a JSON data
             console.log('Service jsonData', jsonData);
        });
      }, error => {
        console.log(error);
      });
  }

I think this will help you....

Upvotes: 0

manaschopra98
manaschopra98

Reputation: 101

This issue can be resolved easily by creating a behaviorSubject and assigning the fetched data to that variable. And when you need to access the data in your component. ts file, you can simply subscribe to the behaviorSubject and get the data.

Once subscribed, you can simply call this.storeService.getData(); and get the updated value automatically(because you have subscribed to the behaviorSubject, it will update the component on value change).

Update your Service "storeService" to the following

yourJsonData: BehaviorSubject<any> = new BehaviorSubject<any>(null);

 getData(): Observable<any> {
 // DO NOT RETURN HERE
    this.httpClient
      .get('http://llocalhost:3000/user/11', { responseType: 'text' as 'text' })
      .pipe(
        map((data) => {
          csv({
            noheader: true,
            trim: true,
            delimiter: ';'
          })
            .fromString(data)
            .then(jsonData => {
              // This is OK - I can see a JSON data
              console.log('Service jsonData', jsonData);
              // STORE THIS JSONDATA TO A BEHAVIOUR SUBJECT
              this.yourJsonData = jsonData;
            })
        })
      )
  }

Now Update your Component.ts file to this....

   getData(): any {
    this.storeService.getData();
    
    this.storeServiceVariable.yourJsonData.subscribe((data) => {
      console.log('Component data: ', data);
    });   
  }

Upvotes: 1

Related Questions