The optional chaining feature seems to be malfunctioning as it is unable to access the property '0' of an undefined value

Question

The optional chaining feature seems to be malfunctioning as it is unable to access the property '0' of an undefined value

Why isn't optional chaining working in this scenario?

.html

 {{userItemModel?.item?.priceList[0]?.sellerUrl}}

An error is displayed:

TypeError: Cannot read property '0' of undefined

"@angular/core": "~10.1.1",

"typescript": "~4.0.2"

 "priceList": [
                {
                    "amount": 14.5,
                    "currency": "USD",
                    "sellerUrl": "https://www.bay.com/itm/Lear-6910-/33372049",
                    "basePrice": 15,
                    "discount": 10
                }
            ],

Update

Use case 1:

  Parser Error: Unexpected token [, expected identifier or keyword at column 33 
in [{{userItemModel?.item?.priceList?.[0]?.sellerUrl}}] in

Use case 2:

Parser Error: Unexpected token [, expected identifier or keyword at column 33 in [

                    {{userItemModel?.item?.priceList?.[0].sellerUrl}}
                ] in

javascript angular typescript

Answer 1

Answer №1

To prevent errors when chaining array access, it is recommended to use arr?.[index]:

var example = {}
try{
  console.log(example?.sample[0])
}
catch(error){
  console.log(error.message)
}
console.log(example?.sample?.[0])

Note: Currently, there is a known issue with Angular related to this topic.

Answer 2

To prevent errors when chaining array access, it is recommended to use arr?.[index]:

var example = {}
try{
  console.log(example?.sample[0])
}
catch(error){
  console.log(error.message)
}
console.log(example?.sample?.[0])

Note: Currently, there is a known issue with Angular related to this topic.

Answer 3

Answer №2

After attempting to replicate your scenario using Typescript Playground, I delved into the underlying mechanics to double-check for any typos on my end.

You can take a look at what I did here: TypeScript Playground

Here is an example of what I tested:

type PriceList = {
    amount: number;
    currency: string;
    sellerUrl: string;
    basePrice: number;
    discount: number;
}

type Item = {
    priceList?: PriceList[]
}
type UserItemModel = {
    item?: Item
}

const userItemModel: UserItemModel = {
    item: {
        priceList: [
            {
                amount: 14.5,
                currency: "USD",
                sellerUrl: "https://www.bay.com/itm/Lear-6910-/33372049",
                basePrice: 15,
                discount: 10
            }
        ]
    };
};
const firstPriceListSellerUrl = userItemModel?.item?.priceList?.[0]?.sellerUrl;

Based on this structure, everything appears to be functioning as expected without any issues.

Answer 4

After attempting to replicate your scenario using Typescript Playground, I delved into the underlying mechanics to double-check for any typos on my end.

You can take a look at what I did here: TypeScript Playground

Here is an example of what I tested:

type PriceList = {
    amount: number;
    currency: string;
    sellerUrl: string;
    basePrice: number;
    discount: number;
}

type Item = {
    priceList?: PriceList[]
}
type UserItemModel = {
    item?: Item
}

const userItemModel: UserItemModel = {
    item: {
        priceList: [
            {
                amount: 14.5,
                currency: "USD",
                sellerUrl: "https://www.bay.com/itm/Lear-6910-/33372049",
                basePrice: 15,
                discount: 10
            }
        ]
    };
};
const firstPriceListSellerUrl = userItemModel?.item?.priceList?.[0]?.sellerUrl;

Based on this structure, everything appears to be functioning as expected without any issues.

The optional chaining feature seems to be malfunctioning as it is unable to access the property '0' of an undefined value

Answer №1

Answer №2

Similar questions

What is the process for redirecting to a Courier site using the consignment number of the item?

Encounter an error message stating "Request failed with status code 502 nginx in Next.js TypeScript."

Sharing data from AJAX calls in Vue using vue-resource

Stopping the Bootstrap carousel when an input is focused

Failed network request in my ReactJS project under the "Auth/network-request-failed" error code

How does express.route determine the route?

Is the scope name not being properly isolated within the controller?

I have a dynamic blog site that is generated on the fly using Ajax, making the content unsearchable

How can I navigate to an external URL without Angular automatically adding "localhost:xxxx" to the address?

Trouble with Loading Bootstrap CSS File

What is the best way to organize imports in an individual Angular component?

In Typescript, you can extend an interface with the Node type to specifically

Using React Hooks to dynamically adjust onClick behavior based on history.location.path

What is the process for creating route transition animations in Angular RC.5?

Having difficulties incorporating a selected custom repository into a module

Provide solely the specified content range

Insert a stylish border to frame the Google pie chart

Ensure NodeJS/JSDom waits for complete rendering before performing scraping operations

Guide to executing various datasets as parameters for test cases in Cypress using Typescript

Customized pop-up alerts on web browsers