I'm not able to exploit the data that i just fetched #Ionic3 #Http #DataIsUndefined


Hey, i’m a complete beginner and i don’t understand what i’m doing wrong.

my component.html :

  <h2>Your in "{{data[0].team_name}}"</h2>
  <div>Start at: {{data[0].start}}</div>
  <div>Stop at: {{data[0].stop}}</div>

my component.ts :

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
import { HttpProvider } from "../../providers/http/http";

export class CheckPage implements OnInit{


      .subscribe(data => {
          this.data = data;
          return this.data;
        err =>{
          console.error("Error : "+err);
        () => {
          console.log('getData completed');

my provider:

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

export class HttpProvider {

  constructor(public http: Http) {
    console.log('Hello HttpProvider Provider');

    return this.http.get('../../assets/data/data.json').map(res => res.json());


In my console i have an array with all the data that i just fetched:

0: Object { id: 1, company_name: “Condo”, address: “213 Grove Street”, … }
1: Object { id: 2, company_name: “Ikea”, address: “213 Ikea Street”, … }
2: Object { id: 3, company_name: “McDo”, address: “213 McDo Street”, … }
length: 3
proto: Array []

plus a error message :

TypeError: _co.data is undefined


Same issue probably as this one


Thanks but it’s not helping, i think that it’s a “timing” problem, my page is loaded before that my http call is completed. How can i fix that ?


Hey there!

Have you tried angular’s safe navigation operator?
If that doesn’t work try using a *ngIf to check if your data has some content in it



Thanks, *ngIf gets rid of the error message, i get now my 3 raw [object, Object] printed on my page


Try giving a type to your data, something like:

data: any;


Pretty sure it is exactlly the same issue, either to be resolved through instantiating a default value in the constructor, using ngIf or the elvis operator ?

Check the great instruction on template binding on angular.io


Thanks data: any[]; + *ngIf worked just fine


Glad I could help, cheers.