sunny sunny - 4 years ago 101
Android Question

getting Rss feed in ionic 2 issues

please I'm having some trouble while trying to parse rss feed using Ionic Framework 2. When I run the code it returns an error: Cannot read property 'title' of undefined. Could you help me?

The project github repository.

https://github.com/edogbosunny/TestApp

reddits-service.ts



import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

/*
Generated class for the RedditService provider.

See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
@Injectable()
export class RedditService {
baseUrl: any;
constructor(public http: Http) {
this.http=http;
this.baseUrl = 'http://naijavibz.blogspot.com/feeds/posts/default?alt=json';
console.log('Hello RedditService Provider');
}
getPost(){
return this.http.get(this.baseUrl)
.map(res => res.json());
}
}


reddits.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {RedditService} from '../../providers/reddit-service';
import {DetailsPage} from '../details/details' ;

/*
Generated class for the Reddits page.

See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component({
selector: 'page-reddits',
templateUrl: 'reddits.html'
})
export class RedditsPage {
items:any;
feeds:any;
posts:any;
constructor(public redditservice:RedditService, public navCtrl: NavController, public navParams: NavParams) {

}
ngOnInit(){
this.getPost();
}
getPost(){
this.redditservice.getPost().subscribe(response =>{
console.log(response);
this.items = response.feed.entry;
})
}
viewItem(item){
this.navCtrl.push(DetailsPage,{
item:item
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad RedditsPage');
}

}


reddits.html


See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>

<ion-navbar>
<ion-title>NaijaVibz</ion-title>
</ion-navbar>

</ion-header>

<ion-content padding>
<ion-list >
<ion-item *ngFor="let item of items">
<h2>{{item.entry.title}}</h2>

</ion-item>
</ion-list>
</ion-content>


Log from console

Objectencoding: "UTF-8"feed: Objectauthor: Array[1]category:
Array[6]entry:
Array[25]generator:
Objectid: Objectlink:
Array[5]openSearch$itemsPerPage:
ObjectopenSearch$startIndex:
ObjectopenSearch$totalResults:
Objectsubtitle: Objecttitle:
Objectupdated: Objectxmlns: "http://www.w3.org/2005/Atom"xmlns$blogger: "http://schemas.google.com/blogger/2008"xmlns$gd: "http://schemas.google.com/g/2005"xmlns$georss: "http://www.georss.org/georss"xmlns$openSearch: "http://a9.com/-/spec/opensearchrss/1.0/"xmlns$thr: "http://purl.org/syndication/thread/1.0"__proto__: Objectversion: "1.0"__proto__: Object
error_handler.js:47 EXCEPTION: Error in ./RedditsPage class RedditsPage - inline template:34:4 caused by: Cannot read property 'title' of undefined
ErrorHandler.handleError @ error_handler.js:47
IonicErrorHandler.handleError @ ionic-error-handler.js:56
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
t.handleError @ polyfills.js:3
e.runTask @ polyfills.js:3
invoke @ polyfills.js:3

**error_handler.js:49 ORIGINAL EXCEPTION: Cannot read property 'title' of undefined**

ErrorHandler.handleError @ error_handler.js:49
IonicErrorHandler.handleError @ ionic-error-handler.js:56
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
t.handleError @ polyfills.js:3
e.runTask @ polyfills.js:3
invoke @ polyfills.js:3
error_handler.js:52 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:52
IonicErrorHandler.handleError @ ionic-error-handler.js:56
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
t.handleError @ polyfills.js:3
e.runTask @ polyfills.js:3
invoke @ polyfills.js:3
error_handler.js:53 TypeError: Cannot read property 'title' of undefined
at View_RedditsPage1.detectChangesInternal (/AppModule/RedditsPage/component.ngfactory.js:234)
at View_RedditsPage1.AppView.detectChanges (view.js:288)
at View_RedditsPage1.DebugAppView.detectChanges (view.js:381)
at ViewContainer.detectChangesInNestedViews (view_container.js:45)
at CompiledTemplate.proxyViewClass.View_RedditsPage0.detectChangesInternal (/AppModule/RedditsPage/component.ngfactory.js:120)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:288)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:381)
at CompiledTemplate.proxyViewClass.View_RedditsPage_Host0.detectChangesInternal (/AppModule/RedditsPage/host.ngfactory.js:29)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:288)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:381)
ErrorHandler.handleError @ error_handler.js:53
IonicErrorHandler.handleError @ ionic-error-handler.js:56
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
t.handleError @ polyfills.js:3
e.runTask @ polyfills.js:3
invoke @ polyfills.js:3
error_handler.js:56 ERROR CONTEXT:
ErrorHandler.handleError @ error_handler.js:56
IonicErrorHandler.handleError @ ionic-error-handler.js:56
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
t.handleError @ polyfills.js:3
e.runTask @ polyfills.js:3
invoke @ polyfills.js:3
error_handler.js:57 DebugContext {_view: View_RedditsPage1, _nodeIndex: 3, _tplRow: 34, _tplCol: 4}
ErrorHandler.handleError @ error_handler.js:57
IonicErrorHandler.handleError @ ionic-error-handler.js:56
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
t.handleError @ polyfills.js:3
e.runTask @ polyfills.js:3
invoke @ polyfills.js:3

Answer Source

You have already set items array as response.feed.entity here:

this.items = response.feed.entry;

Unless the json has nested entity values, your html should have:

  <h2>{{item.title}}</h2>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download