Undefined is not an object

Ionic Framework ionic-v3
1

Dear,
I am a newbies in ionic & angular.
I fetch a remote JSON file and put data in a slider.
sometime I got a runtime error "undefined is not an object (evaluationg ‘activeSlide.hasAttribute’).
Could you help me ?
Thanks,
Philippe

2

Not really. Please show us some of the code you write that includes the line throwing the error. Any other errors when this one occurs?

4 
constructor(private streamingMedia: StreamingMedia , public navCtrl: NavController,public http: Http) {
    this.getAgenda();
    this.getImagePub();
    this.getPlayList();
    this.getSize();

}
getImagePub(){
let myUrl='http://dupriez.be/myApp/images.php’
this.http.get(myUrl).map(res => res.json().data)
.subscribe(data => {
this.slides=data;
});
}
getPlayList(){
let myUrl='http://www.dupriez.be/playlist2.php’
this.http.get(myUrl).map(res => res.json().data).subscribe(data => {
this.playlist=data;
alert(“Playlist”+data)
});
}
getAgenda(){
let myUrl='http://be-agenda.be/eventList/pharefm’
this.http.get(myUrl).map(res => res.json().data).subscribe(data => {
this.agendaList=data;
alert(“agendaList”+data)
});
}

<ion-row>
    <ion-slides pager="false"  #sliderPub >
        <ion-slide *ngFor="let image of slides">
            <img src="http://dupriez.be/myApp/{{image.path}}" />
        </ion-slide>
    </ion-slides>  
</ion-row>
<ion-row>
    <ion-segment color="danger">
        <ion-segment-button value="playlist" (click)='mySlide.slideTo(0, 500)' >Playlist</ion-segment-button>
        <ion-segment-button value="agenda"  (click)='mySlide.slideTo(1, 500)' >Agenda</ion-segment-button>
        <ion-segment-button value="paroledujour" (click)='mySlide.slideTo(2, 500)' >Parole du jour</ion-segment-button>
    </ion-segment>
</ion-row>   
<ion-row >
<ion-slides  #mySlide  >
    <ion-slide>
        <ion-scroll style="height:50vh" scrollY="true">
             <ion-list class="col">
                <ion-item  *ngFor="let song of playlist">
                    <ion-thumbnail item-left >
                        <img src="{{song?.img}}" style="width: 110px;height: 110px;">
                    </ion-thumbnail>
                    <h2>{{song?.artist}}</h2> 
                    <p text-wrap>{{song?.title}}</p>  
                </ion-item>
            </ion-list> 
        </ion-scroll>
    </ion-slide>
    <ion-slide>
        <ion-slides pager="true" autoplay="5000" loop="true" speed="2000">
            <ion-slide *ngFor="let agenda of agendaList">
                <ion-card >
                    <img src="http://be-agenda.be/images/events/{{agenda?.eventId}}/{{agenda?.imgPoster}}"/> 
                    <ion-card-content> 
                        <ion-card-title>{{agenda?.title}}</ion-card-title>
                        <p>
                            {{agenda?.description}}
                        </p>
                    </ion-card-content>
                </ion-card>
            </ion-slide>           
        </ion-slides>  
    </ion-slide> 
    <ion-slide>
        <ion-card style="height:40vh">
            <ion-card-header>
              Card Header
            </ion-card-header>
            <ion-card-content>
              <!-- Add card content here! -->
            </ion-card-content>
          </ion-card>
    </ion-slide>
    </ion-slides>  
</ion-row>

</ion-grid

5

Please edit your post and use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.

6

Get rid of all the Elvis operators in the template, for starters. Then, make sure you do not do anything in the constructor that assumes that the slide component has been fully initialized. It hasn’t, by that point.