[SOLVED] Ionic 3 and Angular 4 - Uncaught (in promise): TypeError: Cannot read property 'title' of undefined

Ionic Framework ionic-v3
21

@lucasbasquerotto nice, it’s working! I’d love to understand what i just did though, i’m not familiar with these notations:

private orderedData: T[] = [];

this.data = this.orderedData.filter(item => !!item);

i started using typescript for the first time with Ionic, this might be the cause…

22

Incidentally, date-fns provides a format function that would eliminate the need for you to deal with all the gnarliness of formatDate().

1 Like
23

Thanks @rapropos, i’ll see if it’s convenient to implement the library!

@lucasbasquerotto now that i used that weird notation i can’t build for android anymore! When i run ionic cordova build android i get these errors

            Cannot find name 'T'.

      L32:  private orderedData: T[] = [];
      L33:  public data: T[] = []; // use this in your html, as you are already using
24

@Fieel T is just the type of object, it could be some interface, like Item, SomeObjectType, it could be any:

private orderedData: any[] = [];
public data: any[] = []

or just:

private orderedData = [];
public data = []

But I advise to use interfaces insteady of any to make the code more legible.

2 Likes
25

Okay, well, looks like i need to understand how to properly use typescript before asking more questions here.

Thank you so much!

26

@Fieel About this code:

this.data = this.orderedData.filter(item => !!item);

This applies Array.filter to create a new array with only the defined items in orderedData.

Because orderedData has objects or undefined as items, if it is an object the value !!item will be true and if it is undefined it will be false.

Javascript objects when used in boolean contexts are seen as true, but when a context needs a real boolean object, you can just use !! before it (negation of negation) resulting in the original value as a real boolean, otherwise you could receive typescript errors about incorrect type (if you used filter(item => item) it would work in javascript, but in typescript it would be a type error).

Update

Now that I tried, filter(item => item) seems to work too (I don’t know if the problem happened only in previous versions of typescript, or if I was just mistaken).

Update 2

It seems it was an error in older versions, but not now:

27

What I think I would do in this situation is to move all the scheduling logic into the provider. I always try to design providers so that they give pages exactly what they want, instead of making the pages cobble stuff together from pieces exposed by the provider. With that viewpoint in mind, I’m thinking something like this: (untested and needs better error handling, though)

interface Payload {
  // idk what goes in here
}

interface DayRecord {
  when: Date;
  displayWhen: string;
  payload: Payload;
}

declare function require(mn: string): any;
let format = require('date-fns/format');
let addDays = require('date-fns/addDays');

export class Provider {
  getDay(day: Date): Observable<DayRecord> {
    return this.getSpecificAPOD(day).pipe(
      map((apod) => {
        return {
          when: day,
          displayWhen: format(day, "YYYY-MM-DD"),
          payload: apod,
        };
      }));
    }

  getDays(starting: Date, ndays: number): Observable<DayRecord[]> {
    return forkJoin(range(0, ndays).pipe(
      mergeMap((doff) => this.getDay(addDays(starting, doff)))));
  }
}
1 Like
28

Thanks for useful answer. That’s worked for me.

29

Thank You, You are right.

30

Muito obrigado @joshmorony.
Me ajudou horas de pesquisa.
Vc tem feito um ótimo trabalho na internet para divulgar o desenvolvimento em IONIC.
Sempre vejo ótimos artigos seus.

Abraço.