CODEWITHSUNDEEP
firebaseionic3observableangular-httpangular-observable
Sireini
Sireini

Reputation: 4260

Assign http response to Observable

What I did was creating a cloud function instead of doing this:

if (organizeby === "Most rating") {
    this.restaurantsRef = this.afDb.list('/restaurants', ref => ref.orderByChild('rating'));
    this.restaurantsList = this.restaurantsRef.valueChanges();
}

Which was working but I created a cloud function and now what I want to do is this:

if (organizeby === "Most rating") {
     this.http.get('https://us-central1-onthespot-bfc6f.cloudfunctions.net/getSortedRestaurantsList')
       .subscribe((data) => {
            console.log('data', data.json());
            this.restaurantsList = data.json();
       })
    }

The console.log shows me the correct list but the response isn't rendered what am I doint wrong here?

Here is the template:

<ion-card *ngFor="let restaurant of restaurantsList | async | termSearch:proptype:'tags'" margin-bottom>
        <div class="card-img-wrap">
            <ion-fab bottom right edge>
                <button ion-fab mini (click)="favorite(restaurant)">
                    <ion-icon name="heart"></ion-icon>
                </button>
            </ion-fab>
            <img src="{{restaurant.thumbnail}}" tappable (click)="openRestaurantDetail(restaurant)">
            <span ion-text class="card-img-price fw700 text-black">
                {{ restaurant.tags }}
            </span>
            <span ion-text class="card-img-status fw500 text-white" [ngClass]="{'closed': restaurant.label === 'closed', 'open': restaurant.label === 'open'}">
                {{ restaurant.label }}
            </span>
        </div>
        <ion-card-content>
            <ion-card-title ion-text color="dark" class="fw700" tappable (click)="openRestaurantDetail(restaurant)" no-margin no-padding>
                {{restaurant.title}}
            </ion-card-title>
            <p ion-text color="primary" no-margin>
                {{restaurant.city}}, {{restaurant.state}} •
                <span ion-text class="fw700">{{ restaurant.price }}</span>
            </p>
            <hr>
            <ion-badge color="secondary">
                <ion-icon name="star"></ion-icon>
                {{ restaurant.rating | number:'1.1' }}
            </ion-badge>
        </ion-card-content>
    </ion-card>

Upvotes: 1

Views: 57

Answers (2)

Luillyfe
Luillyfe

Reputation: 6892

As you are using the async pipe

<ion-card *ngFor="let restaurant of restaurantsList | async | termSearch:proptype:'tags'" margin-bottom>

You no longer need to make an explicit subscription to:

this.http.get('https://us-central1-onthespot-bfc6f.cloudfunctions.net/getSortedRestaurantsList')

Just leave that Angular async pipe control the subscription (import the map operator).

if (organizeby === "Most rating") {
  this.restaurantsList = this.http.get('https://us-central1-onthespot-bfc6f.cloudfunctions.net/getSortedRestaurantsList')
    .map(data => data.json());
}

Let me know how that works !

Upvotes: 1

Abdul Qayyum
Abdul Qayyum

Reputation: 1052

Inside the subscribe method scope of this has changed so if you need to call parents this you will have to define it with different name. try this. 

  let self=this;
    if (organizeby === "Most rating") {
         this.http.get('https://us-central1-onthespot-bfc6f.cloudfunctions.net/getSortedRestaurantsList')
           .subscribe((data) => {
                console.log('data', data.json());
                self.restaurantsList = data.json();
           })
        }

Upvotes: 0

Related Questions