.map is not a function in Angular 2 importing map operator doesn't work

Question

Here is my code, I can't figure out why this is saying .map not a function. This is a generic method.

  public findTeamRoles(id: any, userId: any): Observable<any> {
let _method: string = "GET";
let _url: string = LoopBackConfig.getPath() + "/" + LoopBackConfig.getApiVersion() +
"/Programs/:id/findTeamRoles";
let _routeParams: any = {
  id: id
};
let _postBody: any = {};
let _urlParams: any = {};
if (userId) _urlParams.userId = userId;
let result = this.request(_method, _url, _routeParams, _urlParams, _postBody);
return result.map((instances: Array<Program>) =>
    instances.map((instance: Program) => new Program(instance))
);
}

I'm getting this error:

 core.es5.js:1084 ERROR TypeError: instances.map is not a function

The most likely explanation is that the elements within result are not themselves arrays and therefore don't have a map method. (Or at least one element is not an array.) Perhaps you should have a close look at the elements within result using your debugger? — cartant
– cartant, Commented Jun 15, 2017 at 22:37

Pengyy · Accepted Answer · 2017-06-16 02:18:06Z

4

There is only one possibility for that error. Map is a prototype function of Array, so that instances is null or undefined.

edited Jun 16, 2017 at 2:18

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

answered Jun 15, 2017 at 22:28

Serginho

7,5303 gold badges31 silver badges54 bronze badges

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

7 Comments

developer033 Over a year ago

The only answer that makes sense :) +1

developer033 Over a year ago

"Map is a property of Array in Ecmascript 6...". I'm pretty sure that #map was added in ES5.

Serginho Over a year ago

Yes, you are right. I wasn't thinking in what version has been added. I saw typescript and I thought in ES6.

mrtaz Over a year ago

Ok, but I'm getting id and userId and the debugger is not showing anything out of the ordinary

Serginho Over a year ago

use console.log(instances) just before instances.map and see what's the value.

|

Sibeesh Venu · Accepted Answer · 2018-10-29 09:50:00Z

I was getting this error in my typescript file, where I was pulling some data from a service. And I knew that the map is a prototype function of the Array. So I was just looking at the code and I found that I was missing an await keyword in my function. It is a small mistake.

Before

public async getAddressesBySupplierId(supplierId: string): Promise<IAddressData[]> {
        const addresses: IAddressData[] = this.spFilter.getItems({
            title: config.listNames.adress
        });
        const addressWithType = addresses.map(async (address) => {
        const addressType = await this.getAddressTypeById(address.AdressartIdId);
        return await this.mapAddressType(address, addressType);
    });
        return Promise.all(addressWithType);
    }

After

public async getAddressesBySupplierId(supplierId: string): Promise<IAddressData[]> {
        const addresses: IAddressData[] = await this.spFilter.getItems({
            title: config.listNames.adress
        });
        const addressWithType = addresses.map(async (address) => {
        const addressType = await this.getAddressTypeById(address.AdressartIdId);
        return await this.mapAddressType(address, addressType);
    });
        return Promise.all(addressWithType);
    }

As you can see that on the first code block, I was missing the async keyword on the second line (before the this.spFilter.getItems call).

Collectives™ on Stack Overflow

.map is not a function in Angular 2 importing map operator doesn't work

2 Answers 2

7 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Related