1

I'm Working on Lightning components I would like to add some values in my App, using its controller (aura:handler)

But it doesn't work at all, so the default values of my component is displayed at the end, and only one component.

I already asked a similar question, but as I changed my code I was told :

Since you have a lot of code with new behavior, I would personally suggest a new question to help preserve the context of your original question

Now, I'm pretty sure my issue is when transmitting my datas from the controller to the app, as the app displays the corresponding number of components I'm declaring (in my array), but I'm missing something as nothing is displayed.

I think I got it wrong because of JSON, I may not handle it pretty well..

Here are my app, its Controller, the components and its controller :

App

<aura:application >
<aura:attribute type="Camping_Item__c[]"
                name="objetsCamping" />

<!-- initialisation de valeurs dans le controller -->
<aura:handler name="init"
              value="{! this}"
              action="{! c.doInit}" />

<aura:iteration items="{! v.objetsCamping }"
                var="obj ">
    <c:campingListItem item="{! obj }"/>

</aura:iteration>

AppController

({
doInit : function(component, event, helper) {
    let tabObjets = [],
        i=0;

    // trying to push 3 Camping_Item__c new objects
    tabObjets.push({'sobjectType':'Camping_Item__c', 'Name':'tente', 'Quantity__c':1, 'Price__c': 149.99, 'Packed__c':false});
    tabObjets.push({'sobjectType':'Camping_Item__c', 'Name':'Sac de couchage', 'Quantity__c':3, Price__c:25, Packed__c:false});
    tabObjets.push({'sobjectType':'Camping_Item__c', 'Name':'Du miamiam', 'Quantity__c':42, Price__c:69.4, Packed__c:false});

    for(;i<tabObjets.length;i++) {
        console.log('tabObjets[' + i + '] : ' + tabObjets[i]);
        console.log('typeof (tabObjets[' + i + ']) : ' + typeof(tabObjets[i]));
        console.log('JSON.stringify(tabObjets['+i+'] : ' + JSON.stringify(tabObjets[i]) + '\n\n');
    }

    // send the datas back to app
    // IT IS WHERE I SHOULD FORMAT IT BEFORE, isn't it ?
    component.set("v.objetsCamping", tabObjets);
} })

Component

<aura:component >
<!-- mon attribut de component -->
<aura:attribute name="item"
                type="Camping_Item__c[]"
                required="true"
                default="{'sobjectType':'Camping_Item__c',
                         'Name':'nomObjetJudas',
                         'Quantity__c':666,
                         'Price__c':999,
                         'Packed__c':false}"/>

<!-- test d'ajout pour initialiser un item -->
<aura:handler name="init"
              value="{!this}"
              action="{!c.doInit}"/>

<div>
    <h1>Display {! v.item.Name}'s infos : Price, Quantity, Packed ? using an expression.</h1><br />
    <ul>
        <li>Name : {! v.item.Name}</li><br />
        <li>Price : <lightning:formattedNumber value="{! v.item.Price__c}"
                                           style="currency"
                                           currencyCode="EUR"/></li><br />
        <li>Quantity : <lightning:formattedNumber value="{! v.item.Quantity__c}"/></li><br />

        <li><ui:inputCheckbox aura:id="packed"
                          label="Packed?"
                          value="false"/></li>

    </ul>
</div>
<div>
    <lightning:button label="Packed!"
                      aura:id="disableButt"
                     onclick="{! c.packItem }"
                     disabled="false"/>
</div>
<hr />

ComponentController

({
doInit: function(cmp) {

},

packItem : function(cmp, event, helper) {
    let item = cmp.get("v.item"),       // l'objet utilisé par le composant
        bouton = event.getSource(),     // la source event
        checkbox = cmp.find("packed"); // find car on chope du aura:id

    console.log('item : ' + JSON.stringify(item));
    cmp.set("v.item.Packed__c", true);
    console.log(item.Packed__c);
    bouton.set("v.disabled", true); // yeaaaah ça fonctionne !!

    // desactiver la checkbox
    checkbox.set("v.value", true);
} })

As you can see, I'm interrogating the typeof of my array components, and it's objects not string, but is not sufficient.

enter image description here

Thanks by advance for your help !

1 Answer 1

3

The way you are setting the values in the doInit() method is correct. You don't need to do anything additional here.

// trying to push 3 Camping_Item__c new objects
tabObjets.push({'sobjectType':'Camping_Item__c', 'Name':'tente', 'Quantity__c':1, 'Price__c': 149.99, 'Packed__c':false});
tabObjets.push({'sobjectType':'Camping_Item__c', 'Name':'Sac de couchage', 'Quantity__c':3, Price__c:25, Packed__c:false});
tabObjets.push({'sobjectType':'Camping_Item__c', 'Name':'Du miamiam', 'Quantity__c':42, Price__c:69.4, Packed__c:false});


component.set("v.objetsCamping", tabObjets); // this is correct, nothing else is required.

Your issue here is on this line as below where you are iterating the values and where you have declared the var attribute for the iteration. And the issue is an additional space character in the variable name.

<aura:iteration items="{! v.objetsCamping }" var="obj "> <!-- has a space at the end -->

Once you correct that as below, you will be able to view the values as you are setting in the doInit() method.

<aura:iteration items="{! v.objetsCamping }" var="obj"> <!-- notice no space here -->
1
  • Wow 0_0 I'm shocked, it works !! So, I was litteraly at one space to the answer !! Thanks a lot ! Yesterday, I stopped trying to find the answer by myself. THANKS Commented Jan 15, 2019 at 9:44

You must log in to answer this question.

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