Cannot read property of undefined http get request

Ionic Framework ionic-v3
1

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>
2

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.

3

please. can you give me an example buddy?

4

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>
5

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

6

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

7

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:

8

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.

9

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