Monday, January 23, 2017

How to display parsed xml feed data in ion-list angular 2 ionic 2

Leave a Comment

I'm getting an array of <item> in the console, each one of them contains title, link, description, image and pubDate but the data is not displayed in the ion-list. Could you help me?

Below there is the function load() in rss-service.ts

load() {   return Observable.create(s => {     this.http.get('http://url.xml')       .map(res => res.text())       .subscribe(data => {         if(data) {           var parser = new DOMParser();           var xmlData = parser.parseFromString(data, "application/xml");           var items = xmlData.querySelectorAll("item");           for (var index = 0; index < items.length; index++) {             var element = items[index];             console.log(element);           }         }      });   }); } 

home.ts

export class HomePage {    public entries: any  = [];    constructor(public rssService:RssService, public nav:NavController) {       }    ionViewDidLoad(){       this.rssService.load().subscribe(           data => {               this.entries.push(data);           }       );   }     openPage(entry) {       console.log('open page called with ' + entry.title);       this.nav.push(DetailPage, {selectedEntry:entry});   } } 

home.html

<ion-header>   <ion-navbar color="primary">     <ion-title text-center>      App Name     </ion-title>   </ion-navbar> </ion-header>  <ion-content padding>   </ion-refresher>     <ion-list>         <ion-item *ngFor="let entry of entries" (click)="openPage(entry)" text-wrap>       <h2 class="titles">{{entry.title}}</h2>     </ion-item>     </ion-list> </ion-content> 

1 Answers

Answers 1

Observable implementation is incorrect:

//example var result = Rx.Observable.create(function (subscriber) {    subscriber.next(Math.random());    subscriber.next(Math.random());    subscriber.next(Math.random());    subscriber.complete(); });  //fix, you should also add proper error handling see subscriber.error(..) load() {   return Observable.create(subscriber => {     this.http.get('http://url.xml')       .map(res => res.text())       .subscribe(data => {         if(data) {           var parser = new DOMParser();           var xmlData = parser.parseFromString(data, "application/xml");           var items = xmlData.querySelectorAll("item");           for (var index = 0; index < items.length; index++) {             var element = items[index];             console.log(element);           }           subscriber.next(items);         }         else         {           subscriber.next([]);         }         subscriber.complete();      });   }); } 
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment