Angular 2: ERROR TypeError: .. is not a function

Question

I am trying to use angualrio to read from an array from a json file following this tutorial getting-started-with-angular-2-step-by-step-6-consuming-real-data-with-http/.

However I am getting the error

ERROR TypeError: undefined is not a function

The error occurs at this line

return response.json().map(this.toEvent)

The line above is different from the tutorial since http response had been updated. reponse.json() now return Body.json()

To simplify and mimic my issue I have created a json array x as following

let x = [{
  eventId:132510417453240,
  title:"Discover",
  description:"do",
  startDateTime:1512316800000,
  endDateTime:1512320400000,
  url:null
}]

And then using the line this.toEvent(x[0]) called the function below

private toEvent(r:any): Event{
let event = <Event>({
  eventId: Number.parseInt(r.eventId),
  title: r.title,
  description: r.description,
  startDateTime: Number.parseInt(r.startDateTime),
  endDateTime: Number.parseInt(r.endDateTime),
  url: r.url
});
console.log('Parsed event:', event);
return event;
}

Yet I end up with the error ERROR TypeError: this.toEvent is not a function

UPDATE (In response to @Yonexbat) toEvent is in the same scope I am calling it from. Both function are right after each other in the class as following

private toEvent(r:any): Event{
    let event = <Event>({
      eventId: Number.parseInt(r.eventId),
      title: r.title,
      description: r.description,
      startDateTime: Number.parseInt(r.startDateTime),
      endDateTime: Number.parseInt(r.endDateTime),
      url: r.url
    });
    console.log('Parsed event:', event);
    return event;
  }

  private mapEvents(response:Response): Event[]{
    // The response of the API has a results
    // property with the actual results
    console.log(response)
    console.log(response.json()[1])
    console.log(response.text()[1])

    let events : Event[] = [];
    events = response.json()
    //return events
    return response.json().map((x) => this.toEvent(x))
  }

either do return response.json().map(this.toEvent.bind(this)) or use Arrow function like return response.json().map(() => this.toEvent()) — Pankaj Parkar
– Pankaj Parkar, Commented Nov 26, 2017 at 16:24
@PankajParkar So I tried return response.json().map((x) => this.toEvent(x)) and I got the same error _this.toEvent is not a function. I also tried return response.json().map(this.toEvent.bind(this)) and I got Cannot read property 'bind' of undefined — A.Shoman
– A.Shoman, Commented Nov 26, 2017 at 16:31
Where is this function toEvent defined? It is obviously not in the this scope. Do try this: var toEventFunction= this.toEvent; return response.json().map((x) => toEventFunction(x)); — yonexbat
– yonexbat, Commented Nov 26, 2017 at 16:40
@yonexbat your comment seems valid .. it does not seem that it is in the same scope .. however they are both functions of the same classes .. I have added an update to address your comment — A.Shoman
– A.Shoman, Commented Nov 26, 2017 at 16:53
Is response.json() really an array? You see that in the debugger. You can also try .map((x) => {code of toEvent here instead calling it}); — yonexbat
– yonexbat, Commented Nov 26, 2017 at 17:48

yonexbat · Accepted Answer · 2017-11-26 17:58:45Z

0

Well, this is not a solution but here I can format the text. I tried this and this works in Chrome:

import {Event} from './Event';

export class Test {

    private toEvent(r: number): Event {
        const event: Event = new Event();
        return event;
    }

    public mapEvents(): Event[] {
        const input = [1, 2, 3, 4, 5];
        return input.map((x) => this.toEvent(x));
    }

}

Possibly response.json() is a promise, and not an array. https://developer.mozilla.org/en-US/docs/Web/API/Body/json

Try

const toEventFunction = this.toEvent;
response.json().then(data => {
   let result = data.map(x => toEventFunction(x));
});

edited Nov 26, 2017 at 17:58

answered Nov 26, 2017 at 17:44

yonexbat

3,0123 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

A.Shoman Over a year ago

actually the response.json() is not a promise .. It is just the response's body in json format .. that why when I tried it it did not work

Collectives™ on Stack Overflow

Angular 2: ERROR TypeError: .. is not a function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related