Issue with mapping data in angular

Question

I am trying to map data from my nodejs api to angular. I need to convert the '_id' field from mongoDB to 'id' in angular. I am getting an error trying to map and I am not sure why.

This is my service method to get the data:

    getAddresses(addressesPerPage: number, currentPage: number) {
        const queryParams = `?pagesize=${addressesPerPage}&page=${currentPage}`;
        this.http
            .get<{ message: string; adddresses: any; maxAddresses: number }>(
                `${ORDERS_ADDRESS_URL}/${queryParams}`
            )
            .pipe(
                map((addressData) => {
                    return {
                        address: addressData.adddresses.map(
                            (address: {
                                _id: string;
                                firstName: string;
                                lastName: string;
                                email: string;
                                phone: string;
                                street1: string;
                                street2: string;
                                street3: string;
                                city: string;
                                state: string;
                                zip: string;
                                country: string;
                                notes: string;
                                creator: string;
                            }) => {
                                return {
                                    id: address._id,
                                    firstName: address.firstName,
                                    lastName: address.lastName,
                                    email: address.email,
                                    phone: address.phone,
                                    street1: address.street1,
                                    street2: address.street2,
                                    street3: address.street3,
                                    city: address.city,
                                    state: address.state,
                                    zip: address.zip,
                                    country: address.country,
                                    notes: address.notes,
                                    creator: address.creator,
                                };
                            }
                        ),
                        maxAddresses: addressData.maxAddresses,
                    };
                })
            )
            .subscribe((transformedAddressData) => {
                this.addresses = transformedAddressData.address;
                this.addressesUpdated.next({
                    address: [...this.addresses],
                    addressCount: transformedAddressData.maxAddresses,
                });
            });
    }

When I make the request I am getting data back from my service successfully: { "message": "Address fetched successfully!", "addresses": [ { "_id": "61d5bbe6334f61f04eec36ed", "firstName": "John", "lastName": "Smith", "email": "jsmith@gmail.com", "phone": "123-456-7891", "street1": "123 Somewhere Street", "street2": "Suite 23", "street3": "Building 222", "city": "Kingston", "state": "MA", "zip": "02364", "country": "United States", "notes": "Donec rutrum congue leo eget malesuada. Proin eget tortor risus.", "creator": "61c9df529202251a482c8192", "__v": 0 } ], "maxAddresses": 1 }

The error I am getting is "ERROR TypeError: Cannot read properties of undefined (reading 'map')"

Does this answer your question? [How to avoid 'cannot read property of undefined' errors?](https://stackoverflow.com/questions/14782232/how-to-avoid-cannot-read-property-of-undefined-errors) — Liam, Jan 05 '22 at 16:32
@WillAlexander you were correct that fixed my issue thank you. I cannot believe I missed that thank you! — jak dev, Jan 05 '22 at 16:48
No worries :-) sometimes we get so bogged down in our code, we can't even read it anymore. Might I suggest you invest in a decent IDE? ^^ They catch that kind of typo and give you a nice red underline (and even some suggestions!) — Will Alexander, Jan 05 '22 at 16:53

score 0 · Answer 1 · answered Jan 05 '22 at 16:51

0

I changed this: .get<{ message: string; adddresses: to this: .get<{ message: string; addresses:

and this: address: addressData.adddresses.map( to this: address: addressData.addresses.map(

Per suggestion from @WillAlexander

answered Jan 05 '22 at 16:51

jak dev

33
1
8

score 0 · Answer 2 · answered Jan 05 '22 at 17:40

If you only need to map one property, use '...' (spread / destructing)

this.http
    .get < {
        message: string;adddresses: any;maxAddresses: number
    } > (
        `${ORDERS_ADDRESS_URL}/${queryParams}`
    )
    .pipe(
        map(addressData => {
            addressData.adddresses.map((ad) => ({
                ...ad, // add existing value
                id: ad._id // adds new value
            }))
        ).subscribe((updateAddress) => {
        });

Issue with mapping data in angular

2 Answers2