rendering ionic3 data in view html

Question

**post.html**
<ion-content padding>
  <ion-card>
    <ion-card-content>
       *//Something to do here*
    </ion-card-content>
  </ion-card>
</ion-content>




**post.ts**
export class PostPage {
  items:any;
  displayName: string;

  firedata = firebase.database().ref('/chatusers');

  constructor(public navCtrl: NavController, public navParams: NavParams, public storage:Storage,
              public userservice: UserProvider, public afireauth: AngularFireAuth) {

    this.userservice.getAllPosts().on('value', (snapshot) => {
      let posts = snapshot.val();
      let keys = Object.keys(posts);
      for (let i = 0; i < keys.length; i++) {
        let k = keys[i];
        let postArray = posts[k].post;
        let displayName = posts[k].displayName;

        for (let j = 0; j < postArray.length; j++) {
          let itemList = postArray[j];
          console.log(displayName + " : " + itemList);
        }
      }
    });
  }


**console.log output**
TANMAY : PDP
TANMAY : ALGO TA
TANMAY : smoking kills
SIDDHANT : Bad Grades
SIDDHANT : boytown
SIDDHANT : smoothy

I want this exact output which is displayed in console.log to be displayed in my HTML, For some reason I am unable to do, please help me, I have got everything ready, just need a way to get it rendered in my HTML. New to Ionic3.

console.log(displayName + " : " + itemList); So need to show the name and the itemList — unknown
– unknown, Commented Nov 12, 2017 at 7:11

Sampath · Accepted Answer · 2017-11-12 09:01:08Z

1

You can simply do it as shown below.

Note: Later you can convert this to typed array instead of any (i.e. myArray:any=[]).

According to your use case select the lifecycle event. I have chosen ionViewDidLoad.

ts

myArray:any=[];

constructor(){}

 ionViewDidLoad(){    
   this.userservice.getAllPosts().on('value', (Gotdata) => {
      let posts = Gotdata.val();
      let keys = Object.keys(posts);
      for (let i = 0; i < keys.length; i++) {
        let k = keys[i];
        let postObj = posts[k].post;
        let displayName = posts[k].displayName;

        for (let j = 0; j < postObj.length; j++) {
          let itemList = postObj[j];
          let arrayObj={displayName :displayName ,item:itemList }
          this.myArray.push(arrayObj);//array
        }
      }
    });
}

.html

<ion-content padding>
  <ion-card>
     <ion-list>
       <ion-item *ngFor="let m of myArray" >
       <ion-label>{{m.displayName}}</ion-label>
       <ion-label>{{m.item }}</ion-label>
       </ion-item>
     </ion-list>
  </ion-card>
</ion-content>

edited Nov 12, 2017 at 9:01

answered Nov 12, 2017 at 7:29

Sampath

66.2k70 gold badges327 silver badges461 bronze badges

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

3 Comments

unknown Over a year ago

Worked:) Thanks alot

unknown Over a year ago

One issue that i spotted is that,you have put the JS code in ionViewDidEnter(). The issue with this is, whenever i switch tabs this lets called again so the data gets rendered again and again. Any way to change it?

Sampath Over a year ago

You can change the event.Use ionViewDidLoad().

Collectives™ on Stack Overflow

rendering ionic3 data in view html

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related