Assign http response to Observable

Question

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>

show us the template where you are using this.restaurantsList. — Luillyfe
– Luillyfe, Commented Apr 6, 2018 at 23:01

Luillyfe · Accepted Answer · 2018-04-07 00:02:01Z

1

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 !

edited Apr 7, 2018 at 0:02

answered Apr 6, 2018 at 23:36

Luillyfe

6,9828 gold badges39 silver badges51 bronze badges

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

1 Comment

Sireini Over a year ago

It works when I assign this to restaurantList = return this.httpClient.get(this.sortedRestaurantsURL) .map(response => response)

Abdul Qayyum · Accepted Answer · 2018-04-06 18:23:25Z

0

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();
           })
        }

answered Apr 6, 2018 at 18:23

Abdul Qayyum

1,0628 silver badges15 bronze badges

Collectives™ on Stack Overflow

Assign http response to Observable

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related