"data is undefined" #Ionic3 #Fetch #Http

@dearblackswan wrote:

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

my component.html :

  <h2>Hello</h2>
  <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{

  data;

  ngOnInit():void{
    this.httpProvider.getJsonData()
      .subscribe(data => {
          this.data = data;
          console.log(this.data);
          return this.data;
        },
        err =>{
          console.error("Error : "+err);
        },
        () => {
          console.log('getData completed');
          console.log(this.data);
        }
      );
    console.log(this.data);
  };
}

my provider:

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

@Injectable()
export class HttpProvider {

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

  getJsonData(){
    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

Posts: 1

Participants: 1

Read full topic