Cannot read property of undefined http get request

[pirocoptero]

hey buddies, im getting error while trying to show data in view. Helpe me please…

“Cannot read property ‘logradouro’ of undefined”

PS: console.log of data from http request
Object {cep: "84020-150", logradouro: "Rua Catão Monclaro", complemento: "", bairro: "Centro", localidade: "Ponta Grossa"…}

CADASTRO.TS

import { Component } from '@angular/core';
import { NavController, LoadingController, AlertController } from 'ionic-angular';
import {Http} from '@angular/http';

import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'page-cadastro',
  templateUrl: 'cadastro.html'
})
export class CadastroPage {

  public enderecoData: any;

 constructor(
    public nav: NavController,
    private http:Http,
    public formBuilder: FormBuilder,
    public alertCtrl: AlertController ) { 
 }
 
 elementChanged(input){
    let field = input.inputControl.name;
    this[field + "Changed"] = true;

    if (field == 'cep') {
      this.http.get('https://viacep.com.br/ws/'+input.inputControl.value+'/json/')
		    .map(res => res.json())
		    .subscribe(data => {
          this.enderecoData = data;

		    });
    }

  }

}

CADASTRO.HTML

<ion-item>
        <ion-label stacked>Rua</ion-label>
        <ion-input clearInput #rua formControlName="rua" type="text" (change)="elementChanged(rua)"
        [class.invalid]="!cadastroForm.controls.rua.valid && (ruaChanged || submitAttempt)">{{enderecoData.logradouro}}</ion-input>
</ion-item>

[rapropos]

I would seed enderecoData in the component constructor to some dummy value so that by the time the template wants to access it, it’s not undefined.

[pirocoptero]

please. can you give me an example buddy?

[pirocoptero]

i tried to force a value in constructor, but nothing happened in view

in constructor …

this.enderecoData = {
  "rua" : "Catão Monclaro"
}

html

<ion-item>
    <ion-label stacked>Rua</ion-label>
    <ion-input clearInput #rua formControlName="rua" type="text" (change)="elementChanged(rua)"
    [class.invalid]="!cadastroForm.controls.rua.valid && (ruaChanged || submitAttempt)">{{enderecoData.rua}}</ion-input>
</ion-item>

[ryanlogsdon]

You need to add more imports. Map is not declared.

A very short tutorial on HTTP GET for Ionic2

Hi All, I wanted to post a very short explainer for the http.get() call since nearly every article I’ve read has 2 vital parts missing: proper error handling & timeout enforcement. First, in your *.ts file, include the following libraries and operators: import { Http } from '@angular/http'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/timeout'; Next, the constructor needs to pass in an HTTP object: constructor(public _http: Http) { // we don't need to do anything here to _h…

[pirocoptero]

Thank you Ryan about your tutorial. My response is ok, my problem is how to show that in HTML

[pirocoptero]

I just need to know how to seed the
<ion-input></ion-input>
with the values that is coming from the http request. I have the values on response, the request is ok, i just need to seed the ion-input with that value

[pirocoptero]

Buddies i’m so sorry about my basics HTML’s mistakes! i was putting the {{enderecoData.logradouro}} between the
{{enderecoData.logradouro}} and the correct is in

INCORRECT
<ion-input>{{enderecoData.logradouro}}</ion-input>

CORRECT
<ion-input value="{{enderecoData.logradouro}}"></ion-input>

Thank you for your help.

[ryanlogsdon]

I’m a little concerned because syntactically, they should both work.

This should work as well…

<ion-input [value]="enderecoData.logradouro"></ion-input>

caution! writing this code off the top of my head!