0

I have a Helper function with the following JSON:

getUsersVacationItemsList : function (component, event) {                 
var tableRow =[
   {
     'commonName': 'xpto',
     'calendar': [
       {
         'day': '1',
         'color': 'normal'
       },
       {
         'day': '2',
         'color': 'normal'
       },
       {
         'day': '3',
         'color': 'normal'
       },
       {
         'day': '4',
         'color': 'normal'
       },
       {
         'day': '5',
         'color': 'normal'
       },
       {
         'day': '6',
         'color': 'normal'
       },
       {
         'day': '7',
         'color': 'weekend'
       },
       {
         'day': '8',
         'color': 'normal'
       },
       {
         'day': '9',
         'color': 'normal'
       },
       {
         'day': '10',
         'color': 'normal'
       },
       {
         'day': '11',
         'color': 'normal'
       },
       {
         'day': '12',
         'color': 'normal'
       },
       {
         'day': '13',
         'color': 'normal'
       },
       {
         'day': '14',
         'color': 'normal'
       },
       {
         'day': '15',
         'color': 'normal'
       },
       {
         'day': '16',
         'color': 'normal'
       },
       {
         'day': '17',
         'color': 'normal'
       },
       {
         'day': '18',
         'color': 'normal'
       },
       {
         'day': '19',
         'color': 'normal'
       },
       {
         'day': '20',
         'color': 'weekend'
       },
       {
         'day': '21',
         'color': 'normal'
       },
       {
         'day': '22',
         'color': 'normal'
       },
       {
         'day': '23',
         'color': 'normal'
       },
       {
         'day': '24',
         'color': 'normal'
       },
       {
         'day': '25',
         'color': 'normal'
       },
       {
         'day': '26',
         'color': 'normal'
       },
       {
         'day': '27',
         'color': 'normal'
       },
       {
         'day': '28',
         'color': 'normal'
       },
       {
         'day': '29',
         'color': 'normal'
       },
       {
         'day': '30',
         'color': 'normal'
       }
     ]
   }
 ];
component.set("v.commonMemberCalendarList", tableRow);

},

the attribute that holds this JSON is the following:

<aura:attribute name="commonMemberCalendarList" type="Object[]"     />

I then bind the attribute to a child component in the following manner:

<c:RVT_CalendarEventsGanttMonthly commonMemberCalendarList="{!v.commonMemberCalendarList}"  />

My problem arises in the child component when I try to iterate it and get the day and color attributes from the JSON. This is how I´m doing that:

<aura:iteration items="{!v.commonMemberCalendarList}" var="member" indexVar="indexTop">
        <tr>
            <td class="member-row">
                <article class="slds-card slds-p-vertical_xxx-small">
                    <div class="slds-card__header slds-grid">
                        <header class="slds-media slds-media_center slds-has-flexi-truncate">

                            <lightning:avatar src="...................."
                                              class="slds-avatar_circle"                fallbackIconName="standard:avatar" alternativeText="Salesforce"/>
                            <div class="slds-media__body">
                                <h4>
                                    <a href="#" title="Team Member Vacations">
                                        <span class="slds-text-heading_small">{!member.commonName}</span>
                                    </a>
                                </h4>
                            </div>
                        </header>
                    </div>
                </article>
            </td>
            <td class="daysList">
                <aura:iteration items="{!v.commonMemberCalendarList.calendar}" var="days" indexVar="index">
                    <th class="days-wrapper">
                        <div class="{!'slds-truncate slds-align_absolute-center days ' + days.color}" title="day"> {!days.day}</div>
                    </th>
                </aura:iteration>
            </td>
        </tr>                                               
 </aura:iteration>

I can only get the commonName value, when I try to get the calendar values i don´t seem to be able to get it to work.

0

For commonName you are starting from a member object taken the list:

  • {!member.commonName}

but for calendar you are mistakenly starting from the list itself:

  • {!v.commonMemberCalendarList.calendar}

rather than starting from an object taken from the list e.g. your member variable.

| improve this answer | |
  • thank you @Keith C, didn´t notice that. The second iteration worked with : <aura:iteration items="{!member.calendar}" var="days" indexVar="index"> – Sam.A Apr 25 '18 at 12:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.