Cannot read property of undefined http get request

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>

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.

please. can you give me an example buddy?

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

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>

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

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

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 :sob: :sob: :sob:

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.

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! :slight_smile:

1 Like