This is what I get from apex:

item_variations: Array(4)
      available_quantity: 10
      item: "a0D4W00000Qw9dl"
      item_long: "a0D4W00000Qw9dlUAB"
          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">

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"
  • Can you check if producto is an array structure within each entry of item_variations?
    – arut
    Dec 31, 2020 at 17:40
  • it is an object: { "name": "Mochila NEGRA", "sf_id": "a1k0L000002dIuT", "sf_id_long": "a1k0L000002dIuTQAU" } Dec 31, 2020 at 18:34

3 Answers 3


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


in the layout-item




doesn't generate an error then likely this will work for the 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.

  • so, I can access the name property of the "producto" object, by writing itemVariation.name directly? Dec 31, 2020 at 16:45
  • @joacoiudica I'm guessing yes if {itemVariation.sf_id} doesn't generate an error. But best you examine the data structure using one of the ways described above.
    – Keith C
    Dec 31, 2020 at 16:48
  • itemVariation.sf_id shows the sf_id of itemVariation, and not the sf_id of producto, so no, it doesn't work sadly Dec 31, 2020 at 18:35
  • Hi @joacoiudica OK. Do the console.log in the .js file to double check the structure. Is all the data set in one go? If producto is set asynchronously, you could use lightning-layout-item if:true{itemVariation.producto} ... as a guard.
    – Keith C
    Dec 31, 2020 at 20:20

you can apply null checks just like shorthands in javascript:

let prod = 'something';

    //do something

LWC template equivalent code:

<template if:true={prod}>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .