How to get data and display in html from firebase using angular/typescript

Question

I want to display all my posts with description title and price in my html using angular i am using firebase.
Here is my Code

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title>
            Medical Tourism
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content padding>
    {{title}}
    {{desc}}
    {{price}}
</ion-content>
<ion-tabs>
    <ion-tab label="Get Card" icon="information-circle" href="tabs/(get-card:get-card)">
        <ion-router-outlet stack name="get-card"></ion-router-outlet>
    </ion-tab>
</ion-tabs>

When I console.log() I get all my posts whit all I need but when I get it on html there is just first post with description title and price.
But in Console i get it

import { Component, OnInit, ViewChild } from '@angular/core';
import * as firebase from 'firebase/app';
import { AngularFireDatabase } from 'angularfire2/database';

@Component({
    selector: 'app-medtour',
    templateUrl: './medtour.page.html',
    styleUrls: ['./medtour.page.scss'],
})
export class MedtourPage implements OnInit {

    title: any;
    desc: any;
    price: any;

    constructor(public db: AngularFireDatabase) {

        firebase.database().ref().child("medtour_posts/").on('value', (shapshot) => {
            shapshot.forEach((child) => {
                this.title = child.val().title;
                this.desc = child.val().description;
                this.price = child.val().price;

                console.log(this.title,this.desc,this.price);
            })
        })
    }

    ngOnInit() {}



}

Nikolai Kiefer · Accepted Answer · 2018-11-22 14:06:08Z

2

well your console.log is inside the for each loop thats why it gets printed everytime. But you're assigning the value to the same variable each time. it gets overwritten. You'll need an array or multiple variables to display all

export class MedtourPage implements OnInit {

 childs: [];

    constructor(public db: AngularFireDatabase) {

firebase.database().ref().child("medtour_posts/").on('value', (shapshot) => {
      shapshot.forEach((child) => {
       this.childs.push(
        {title:child.val().title),
         desc:child.val().description),
         price:child.val().price)};
     })
  })
}




<ion-header>
<ion-toolbar>
    <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
        Medical Tourism
    </ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding *ngFor="let child in childs">
    {{child.title}}
    {{child.desc}}
    {{child.price}}
</ion-content>
<ion-tabs>
<ion-tab label="Get Card" icon="information-circle" href="tabs/(get-card:get-card)">
    <ion-router-outlet stack name="get-card"></ion-router-outlet>
</ion-tab>

edited Nov 22, 2018 at 14:06

answered Nov 22, 2018 at 12:43

Nikolai Kiefer

6136 silver badges21 bronze badges

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

9 Comments

Levon Matevosyan Over a year ago

Thank you. Please can you tell me how can i achieve that?

Nikolai Kiefer Over a year ago

i edited the my answer a bit. Its not a optimal solution but should work. I recommend you look up arrays, objects for javascript/typescript and ngFor for angular. It should get you on the right track

Levon Matevosyan Over a year ago

uhhh...its showing blank but in console it working correct.i think the problem is in html......

Levon Matevosyan Over a year ago

ok...now we did it..but here is one problem it is displaying data incorrect. like title after title description after description)))))) not like tilte-description another title and description

Nikolai Kiefer Over a year ago

Yes, thats because it iterates over array after array. You need one Array wich holds Object. In our case array childs wich gets loaded with an object in each loop.I edited the Answer again. Check out if it works for you

|

Collectives™ on Stack Overflow

How to get data and display in html from firebase using angular/typescript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related