Cannot read property 'Documento' of undefined

3487 views angular
-3

I am attempting to query an object that is stored on my firestore database and to do so i am using a json format to iterate through the object and display it on HTML. At first, i was able to display on my console log, but after refreshing my page i started getting the errors on my google chrome developer console.

Here's how i am trying it

constructor(public navCtrl: NavController,
    public alertCtrl: AlertController) {
    let db = firebase.firestore();
    var auxint = 0;
    this.dataAux
    let auxString = '[';
    db.collection('Usuario').where("Deletado", "==", false).get().then(res => {
      res.forEach(item => {

        //pegue todos os dados do banco e crie um novo JSON com as informações de 
        auxint++;
        auxString += '{"id":"' + item.id + '","documento":' + JSON.stringify(item.data()) + '}';

        if (res.size != auxint)
          auxString += ', ';
      })
      auxString += ']';
      this.dataJSON = JSON.parse(auxString);

    }).catch(err => {
      console.log('algum erro ' + err);
    });
  }

Where Usuario is my collection name.

my .html file

<ion-item-sliding *ngFor="let data of dataJSON">
  <ion-item>
    <h3>DataCriacao: {{data.DataCriacao}}</h3>
    <p>DataUpdate: {{data.DataUpdate}}</p>
    <p>DELETADO: {{data.Deletado}}</p>
    <p>EMAIL: {{data.Usuario.Documento.email}}</p>
    <p>ID: {{data.Usuario.Documento.id}}</p>
    <p>NOME: {{data.Usuario.Documento.nome}}</p>
    <p>SENHA: {{data.Usuario.Documento.senha}}</p>
    <p>TELEFONE: {{data.Usuario.Documento.telefone}}</p>
  </ion-item>
  <ion-item-options>

data is my iteration data, Usuario is my collection and Documento is my object stored inside firestore, everything else are just field values.

https://imgur.com/a/HHmZDpZ

answered question

2 Answers

7

You can handle this error by using *ngIf OR safe navigation operator (?) .

Reason: It's just a console error that occurs when you try to access the dataJSON in the template before the actual value is set on the component. this happens because the data is assigned asynchronously.

Solution:

<ion-item-sliding *ngFor="let data of dataJSON">
  <ion-item>
    <h3>DataCriacao: {{data?.DataCriacao}}</h3>
    <p>DataUpdate: {{data?.DataUpdate}}</p>
    <p>DELETADO: {{data?.Deletado}}</p>
    <p>EMAIL: {{data?.Usuario?.Documento?.email}}</p>
    <p>ID: {{data?.Usuario?.Documento?.id}}</p>
    <p>NOME: {{data?.Usuario?.Documento?.nome}}</p>
    <p>SENHA: {{data?.Usuario?.Documento?.senha}}</p>
    <p>TELEFONE: {{data?.Usuario?.Documento?.telefone}}</p>
  </ion-item>
  <ion-item-options>

posted this
1

A cleaner approach would be to check if data exists or not instead of using so many safe( ? ) operators. Something like this:

<ion-item-sliding *ngFor="let data of dataJSON">
  <ion-item *ngIf="data">
    <h3>DataCriacao: {{data.DataCriacao}}</h3>
    <p>DataUpdate: {{data.DataUpdate}}</p>
    <p>DELETADO: {{data.Deletado}}</p>
    <p>EMAIL: {{data.Usuario.Documento.email}}</p>
    <p>ID: {{data.Usuario.Documento.id}}</p>
    <p>NOME: {{data.Usuario.Documento.nome}}</p>
    <p>SENHA: {{data.Usuario.Documento.senha}}</p>
    <p>TELEFONE: {{data.Usuario.Documento.telefone}}</p>
  </ion-item>
<ion-item-options>

Also, in your TypeScript class, you could use Template Strings Syntax:

constructor(public navCtrl: NavController,
  public alertCtrl: AlertController) {
  let db = firebase.firestore();
  var auxint = 0;
  this.dataAux
  let auxString = '[';
  db.collection('Usuario').where("Deletado", "==", false).get().then(res => {
    res.forEach(item => {

      //pegue todos os dados do banco e crie um novo JSON com as informações de 
      auxint++;
      auxString += `{"id":"${item.id}","documento":${JSON.stringify(item.data())}}`;

      if (res.size != auxint)
        auxString += ', ';
    })
    auxString += ']';
    this.dataJSON = JSON.parse(auxString);

  }).catch(err => {
    console.log('algum erro ' + err);
  });
}

posted this

Have an answer?

JD

Please login first before posting an answer.