cannot read properties from undefined in inner object

Question

This is what I get from apex:

item_variations: Array(4)
    0:
      available_quantity: 10
      item: "a0D4W00000Qw9dl"
      item_long: "a0D4W00000Qw9dlUAB"
      producto:
          name: "Mochila NEGRA"
          sf_id: "a1k0L000002dIuT"
          sf_id_long: "a1k0L000002dIuTQAU"

So item_variations is a field of the item custom object, which contains objects. Each of the item variations has a related product (producto) which contains some data that I want to display in my html, for example:

<template for:each={item.item_variations} for:item="itemVariation">
                <div class="grid" key={itemVariation.sf_id}>
                    
                    <lightning-layout-item padding="around-small">
                        <p>{itemVariation.producto.name}</p>
                    </lightning-layout-item>
                </div>

So the itemVariation represents each one (as you can imagine) and I'm trying to access the nested "producto" property, which contains the data I want to display. The js throws error "cannot read property name, of undefined". The apex method that fetches the items is AuraEnabled(cacheable=true) and I tried by changing to {itemVariation.data.producto.name} and it didn't work. Is there anything else I'm missing?

EDIT: this is the structure of "producto":

{
"name": "Mochila NEGRA",
"sf_id": "a1k0L000002dIuT",
"sf_id_long": "a1k0L000002dIuTQAU"
}

Answer 1

Well, it was a very simple problem, I couldn't see it.

The way I did it before, the html was trying to render the producto.name even if the itemVariation didn't have a producto. so, that why it gave me the undefined error. I just needed to add

if:true={itemVariation.producto}

in the layout-item

Answer 2

If:

{itemVariation.sf_id}

doesn't generate an error then likely this will work for the name:

{itemVariation.name}

In Apex using System.debug(JSON.serializePretty(variable)); is a good way to check object structure to confirm what you are dealing with. And console.log(JSON.stringify(variable, null, 4)); is the JavaScript equivalent on the client-side.

Answer 3

you can apply null checks just like shorthands in javascript:

let prod = 'something';

if(prod){
    //do something
    prod.something
}

LWC template equivalent code:

<template if:true={prod}>
    {prod.somethig}
</template>