Angular9 http.get() give undefined

Question

I search more result about this argument, but none of the answers help me. I trying to do an http.get() in angular, using an url from firebase: https://firestore.googleapis.com/v1/projects/angularfirebasegb/databases/(default)/documents/cart?key=AIzaSyDNW48hAmvH8eAZpbeflRKb0khY5Blzsqg

as you can try, it works returning a json. I tried in different ways, but the result is 'undefined' anyway. Now I'm trying in this mode:

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 '@angular/http';
//import { HttpClient } from '@angular/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';


  constructor(private db: AngularFirestore, private http: Http) { }

    query() {
      // promise
      // take values stored in cart in Firebase
      return this.db.collection('/cart').valueChanges();
    }

  add(data){
    // this is going to put some items into an item collection, storing data in firebase
    let item = this.db.collection<BookModel>('/cart').add(data.getData());
    // next is going to do all the save for us (but the name is a quite strange)
    this.emitAddToCart.next(item);
    return item;
  }

  emitChange(book: BookModel) {
    this.emitAddToCart.next(book);
  }

  httpCall() {
    debugger;
    // return this.http.get(this.hardCodeUrl);
    return this.http.get(this.hardCodeUrl).pipe(map(data => {})).subscribe(result => {
      console.log("RISULTATO " +result);
    });
  }
}

And calling service.httpCall() from another class, it print "RISULTATO undefined". Before of this I tried up with return this.http.get(this.hardCodeUrl); calling it in this way:

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

but still undefined, in fact after this, doing:

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

It give me error cause undefined. I don't know why.

UPDATE: Using

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

it returns an object like that:

and .text() returns empty

jeprubio · Accepted Answer · 2020-05-11 22:28:15Z

2

Your map pipe .pipe(map(data => {})) is making it return undefined:

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

This will return each object.

result

The map operator applies a given project function to each value emitted by the source Observable and emits the resulting values as an observable. You are getting each value and returning an empty object as result.

I prefer returning instead the Observable from the service:

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

And subscribe to it from the components that need this values:

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

And if you need to do some transformation you can still do it in the server and returning the observable:

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

This returns an observable with the values of the documents property of that original response.

result2

edited May 11, 2020 at 22:28

answered May 11, 2020 at 21:59

jeprubio

18.1k5 gold badges51 silver badges62 bronze badges

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

5 Comments

Giacomo Brunetta Over a year ago

Maybe I found the problem.... angular.io/guide/deprecations#angularhttp I have to understand how to rewrite the code using @angular/common/http instead of @angular/http...

Giacomo Brunetta Over a year ago

The problem was caused by deprecations. But now I have another problem: "this.handler.handle is not a function"

jeprubio Over a year ago

I see, I didn't know about this. I've just learnt angular recently, In fact... I'm still learning it. This handler error seems also related to imports or module configuration in some cases. I'll try to create a stackblitz and share it in case it helps.

jeprubio Over a year ago

Here you have it: stackblitz.com/edit/angular-ivy-cedzjg It does the call with and without the map and logs the result of the api call in the console. I hope this helps.

Giacomo Brunetta Over a year ago

It works, the problem is my testing module! It works like your code! Thanks

Collectives™ on Stack Overflow

Angular9 http.get() give undefined

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related