function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Surya Chandra Rao GandreddiSurya Chandra Rao Gandreddi 

Lightning Component - Second Level of an Associative Arrays are not accessible from Component

We have a component which was working fine, until Yesterday - we are using Associative arrays. So I created a simple component and replicated the issue.
Component
<aura:component controller="LightningAdminController">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <aura:attribute name="data" type="Object"/>

    <div>Value: {!v.data.obj.key}</div>
    <div>UserId: {!v.data.user.Id}</div>

</aura:component>

Controller
({
  doInit: function(component, event, helper) {
    var data = {
      'obj': {
        'key': 'Valuess'
      }
    };
    component.set('v.data', data);
    console.log('data: ', data);
    helper.getLearner(component);

  }
})


Helper
({
  getLearner: function(component) {
    var self = this;
    var action = component.get("c.UserDetails");
    action.setCallback(this, function(response) {
      var state = response.getState();
      if (component.isValid() && state === "SUCCESS") {
        var data = component.get("v.data");
        data.user = response.getReturnValue();

        component.set("v.data", data);

        console.log('UserID: ', component.get("v.data").user.Id);
      }
    });
    $A.enqueueAction(action);
  },
})


I can see the UserID in the console log, but the component doesn't show the user ID, it stays blank. Any suggestions.
Thanks.


Edit: If I add the key - user (with value UserID) to the data in controller it works fine, I mean the v.data.user.Id shows 'UserID' and then it is replaced with the one from the Action call.
Controller
({   doInit: function(component, event, helper) {
    var data = {
      'obj': {
        'key': 'Valuess'
      },
      'user': {
        Id: 'UserID'
      }
    };
    component.set('v.data', data);
    console.log('data: ', data);
    helper.getLearner(component);

  } })