Why can I not use the indexOf function in my angular 2 typescript code?

Question

I get the error:

EXCEPTION: value.indexOf is not a function

whenever I try to use a javascript function. Here is the code:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'id'
})
export class IdPipe {
    transform(value: string): string {
        let start = value.indexOf('"id": "')
        let id = value.substring(start + 7, start + 7 + 36);

        return id;
    }
}

What do I need to do to make this work? I see similar examples in other people's code, so I think this should work.

Can you check the type at the start of the function? console.log(typeof value); — Tholle
– Tholle, Commented Feb 1, 2017 at 14:36
The error means that the value of value is something that does not have an indexOf property. You can console.log(typeof value) before that to see what's going on. — Pointy
– Pointy, Commented Feb 1, 2017 at 14:39

Yoav Schniederman · Accepted Answer · 2017-02-01 14:46:40Z

2

you should insert condition in the begining of the transform function

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'id'
})
export class IdPipe {
    transform(value: string): string {
        if(value !== null && value !== undefined){
          let start = value.indexOf('"id": "')
          let id = value.substring(start + 7, start + 7 + 36);

          return id;
        }    
    }
}

answered Feb 1, 2017 at 14:46

Yoav Schniederman

5,4033 gold badges30 silver badges32 bronze badges

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

Comments

Brother Woodrow · Accepted Answer · 2017-02-01 14:57:41Z

0

Your pipe will be executed multiple times. Some of these times, like when your component hasn't fully initialized yet, "value" will be null or possibly undefined, and then it will not have the indexOf method. That's why you're getting this error.

Add a safety check:

transform(value: string): string {
    if (!value) return value;

    let start = value.indexOf('"id": "')
    let id = value.substring(start + 7, start + 7 + 36);

    return id;
}

(I generally find it preferable to return early, but Yoav Schniederman's answer is perfectly valid as well.)

answered Feb 1, 2017 at 14:57

Brother Woodrow

6,3923 gold badges22 silver badges24 bronze badges

Collectives™ on Stack Overflow

Why can I not use the indexOf function in my angular 2 typescript code?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related