0

im building a list that people select only a single item which works in a limited capacity but reloading or re-selecting isnt very user friendly. the basic concept is a controller retrieves selections, uses aura iteration and displays a custom component for each selection. there are a couple of events that get thrown around, one of them when a selection is made. I capture the event in the main controller, now i want to loop through the selection list again and set which one is selected. im retrieving the list of things but it returns some weird array structure and im not sure how to navigate into it.

outer component:

Locations:
                <ul class="slds-has-dividers_around-space">
                    <aura:iteration items="{!v.examinationApplicationType.events}" var="event">
                        <li class="slds-item">
                            <!--{!event.Name}-->
                            <c:Examination_Event aura:id="eventHolder" examEvent="{!event}" selected="{!event.Id == v.application.Examination_Event__c }"/>
                        </li>
                    </aura:iteration>
                </ul>

exam event component

<aura:component>
<aura:attribute name="examEvent" type="Object" access="global"/>
<aura:attribute name="selected" type="Boolean" access="global"/>
ui stuff based on event and selected

event selected event handler

eventSelected: function(component, event, helper) {
    console.log('event selected in main component');
    //var map = component.get('v.map');
    var my_event = event.getParam('event');
    //console.log(my_event); //; returns proxy
    //console.log(JSON.stringify(my_event)); // returns event as a string
    var eventsInApp = component.find("eventHolder"); // get all events loaded as some array
    console.log('eventsInApp');
    console.log(eventsInApp);

    for(var thing in eventsInApp){ // how do i look inside them?
        console.log('thing');
        console.log(thing);
        var thisEvent = thing.getElement();
        console.log(thisEvent);
    }

    component.set("v.event", my_event);
    var eventType = component.get("v.eventType");

    component.set("v.confirmString", "Confirm " + my_event.Name + "  " + eventType);
},

console.log of iteration events

Proxy {0: a, 1: a, length: 2}
[[Handler]]
:
Object
[[Target]]
:
Array(2)
[[IsRevoked]]
:
false
  • do you have a sample of your weird array structure ? – glls Oct 11 '18 at 23:22
  • i added a sampling of the console.log, it goes deeper though and im not sure how to capture it all – textual Oct 11 '18 at 23:32
0

It's a perfectly normal Array; there's no need to overthink it. Each of the items in the array is a SecureComponent or SecureComponentRef (if outside your own namespace). You can interact with them normally, for example, by getting an attribute via SecureComponent#get.

eventsInApp.forEach(
  comp => console.log(comp.get("v.examEvent").Id) // outputs the event ID
);

The items you get back should match the values in the events array that you're iterating from to begin with. I personally wouldn't recommend using the entire object as a comparison, but instead have a unique value to work from, like an ID or something.

  • ah, ok, cool. thanks. your JS is a little advanced, im not 100% sure how to use the => but i wanted to loop through and set a value of selected in each based on the comparison to the id that was selected. something like this: comp => comp.set("v.selected") = (comp.get("v.examEvent").Id == my_event.Id); – textual Oct 11 '18 at 23:42
  • @textual You can't set selected, because it's already bound to an expression, so it'll rerender if the list rerenders. You might want to change that part of your code to something else. – sfdcfox Oct 12 '18 at 0:29
  • Then I guess im not sure what to do. I want to toggle the new selection. Will I need to add events to the selection items and add the logic within them? – textual Oct 12 '18 at 18:25
  • @textual you need a Boolean value in your data itself that you can bind to. You may want to change your data structure slightly, so it resembles something like the following: [ { event: { ... event data ... }, selected: false }, ... ] and from there, you now have an easy way to set the selected attribute directly. – sfdcfox Oct 12 '18 at 18:28
  • I think I already have that. In my ExamEvent component, I have a boolean attribute named Selected, which controls an icon swap. Maybe you're saying it should be part of the actual exam data model rather than a component attribute..? – textual Oct 12 '18 at 19:37

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.