CODEWITHSUNDEEP
angulartypescripthttpget
Giacomo Brunetta
Giacomo Brunetta

Reputation: 1567

Angular9 http.get() give undefined

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:

enter image description here

and .text() returns empty

Upvotes: 1

Views: 893

Answers (1)

jeprubio
jeprubio

Reputation: 18002

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

Upvotes: 2

Related Questions