component.get("v.colData.data") returning different result to component.get("v.colData").data

Question

I know I am doing something wrong. I'm just not sure what. I have the following 2 ways of adding data to an attribute:

rowDataItems.push(rowDataItem = {
    name : colItems[j].name,
    data : rowData[colItems[j].name],
    type : colItems[j].type,
    class : colItems[j].class,
    indexed : colItems[j].indexed,
    subItems : colItems[j].subItems
});

And

rowDataItem.subItems.forEach(function(subItem) 
    subItem.data = rowDataItem.data[subItem.name];
});

My problem is that the first construct when referenced as component.get("v.colData") returns an Object with 'data' as a member.

{,...} in the Safari debugger

And both component.get("v.colData.data") and component.get("v.colData").data return the expected data structure.

The second construct when referenced as component.get("v.colData") returns an Object but it appears as

{data: {}} in the Safari debugger.

There is other data in the structure but that is how it displays in the debugger. component.get("v.colData.data") returns undefined whereas component.get("v.colData").data returns the expected data structure.

As I said I know I've done something wrong. I suspect it is how I've added the data in the structure. To use the data in my component I need component.get("v.colData.data") to work. Can anyone tell me why component.get("v.colData").data works but component.get("v.colData.data") doesn't and how I can get the request to return the expected data?

Thanks, Greg.

Answer 1

I'm not a 100% sure about it but my guess is that when using

component.get("v.colData.data")

aura is actually looking for an attribute that is called v.colData.data and as the attribute doesn't exist it brings back undefined