"When using Angular9's http.get() method, it sometimes returns undefined

Question

"When using Angular9's http.get() method, it sometimes returns undefined

I have been researching this topic further, but none of the solutions provided have helped me. I am attempting to make an http.get() request in Angular using a URL from Firebase: https://firestore.googleapis....

Despite successfully receiving JSON data through the URL, I have been unable to retrieve it in my code. Here is the approach I am currently trying:

import { Injectable } from '@angular/core';
// install rxjs first: npm install rxjs-compat --save
import { Observable } from 'rxjs/Observable';
import { BookModel } from '../../models/book/book.model';
import { Subject } from 'rxjs/Subject';
import { AngularFirestore } from '@angular/fire/firestore';
//import { AngularFirestore } from 'angularfire2/firestore';
// se non presente: npm install @angular/http@latest
import { Http } from '@http/http';
//import { HttpClient } from '@common/http'; 
import { map } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class CartService {
  private emitAddToCart = new Subject<any>();
  addEmitted$ = this.emitAddToCart.asObservable();
  // http requests (https://firebase.google.com/docs/firestore/use-rest-api) example of httprequest
  hardCodeUrl = 'https://firestore.googleapis.com/v1/projects/angularfirebasegb/databases/(default)/documents/cart?key=AIzaSyDNW48hAmvH8eAZpbeflRKb0khY5Blzsqg';
...

When calling service.httpCall() from another class, it returns "RISULTATO undefined". I attempted to call

return this.http.get(this.hardCodeUrl);

as follows:

service.httpCall().subscribe(data => {
  responseFromBackEnd = data;
});

However, the response still remains undefined even after parsing it in the following way:

let jsonFromBackend = JSON.parse(responseFromBackEnd.text());

This results in an error due to the undefined value. Update: By implementing

return this.http.get(this.hardCodeUrl).subscribe(result => {
    console.log("RISULTATO", result);
});

An object like the following is returned:

https://i.sstatic.net/PxRKV.png

and .text() yields an empty value

angular typescript http get

Answer 1

Answer №1

Your current implementation using the map operator in your map pipe .pipe(map(data => {})) is causing it to return undefined:

return this.http.get(this.hardCodeUrl).subscribe(result => {
    console.log("RESULT", result);
});

This setup will output each object individually.

The purpose of the map operator is to apply a specific project function to every value emitted by the source Observable and then emit these transformed values as an observable. In your case, you are receiving each value but returning an empty object as the output.

A better approach would be to return the Observable directly from the service:

httpCall() {
   return this.http.get(this.hardCodeUrl);
}

You can then subscribe to this Observable from any components that require these values:

this.service.httpCall().subscribe((res) => {
   console.log("Response", res);
});

If you need to perform any transformations, you can do so within the server's logic and return the modified Observable:

httpCall() {
  return this.http.get(this.hardCodeUrl).pipe(
    map((res: { documents: any }) => {
      return res.documents;
    })
  );
}

This will return an observable containing the values of the "documents" property from the original response.

Answer 2

Your current implementation using the map operator in your map pipe .pipe(map(data => {})) is causing it to return undefined:

return this.http.get(this.hardCodeUrl).subscribe(result => {
    console.log("RESULT", result);
});

This setup will output each object individually.

The purpose of the map operator is to apply a specific project function to every value emitted by the source Observable and then emit these transformed values as an observable. In your case, you are receiving each value but returning an empty object as the output.

A better approach would be to return the Observable directly from the service:

httpCall() {
   return this.http.get(this.hardCodeUrl);
}

You can then subscribe to this Observable from any components that require these values:

this.service.httpCall().subscribe((res) => {
   console.log("Response", res);
});

If you need to perform any transformations, you can do so within the server's logic and return the modified Observable:

httpCall() {
  return this.http.get(this.hardCodeUrl).pipe(
    map((res: { documents: any }) => {
      return res.documents;
    })
  );
}

This will return an observable containing the values of the "documents" property from the original response.

"When using Angular9's http.get() method, it sometimes returns undefined

Answer №1

Similar questions

Utilize zimJS within an Angular 4 application written in Typescript

What is the best method for connecting an Angular 2 application with an existing Angular JS app?

Unable to locate the _app.js file within my Next.js project

Can RESTKit effectively replace ASIHTTPRequest?

How can we transfer a value from a parent component class to a child subclass?

Executing an Angular 4 script using a scheduled CRON job

Angular static dropdown option

"Troubleshooting Problem with Closing Drawer Function in Material-UI Drawer

Encountering deployment problems with React and TypeScript involving router on Github Pages

Using the <head> or <script> tag within my custom AngularJS2 component in ng2

Duplicate request detected for ASIHTTPRequest

Sending a parameter to a confidential npm module

Steps to create a persistent bottom modal with scrollable content

Using Angular2 observables to parse JSON with a root element

Swap out the traditional for loop with a LINQ query utilizing the any method

Declaration files for Typescript ESLint configurations

What is the best way to verify nested objects with a generic type?

It is feasible to completely override a class in TypeScript

Enhancing SQLite syntax in Ionic 2: A fresh approach!

Leverage the Partial type within nested properties when working with TypeScript