0

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

I'm trying with this :

component.set("v.objetsCamping", tabObjets);

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

Here are my codes :

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="objetsCamping"
                    var="obj">
        <c:campingListItem />
    </aura:iteration>
</aura:application>

AppController.js

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

        tabObjets.push("{'sobjectType':'Camping_Item__c', Name:'tente', Quantity__c:1, Price__c:149.99}");
        tabObjets.push("{'sobjectType':'Camping_Item__c', Name:'Sac de couchage', Quantity__c:3, Price__c:25}");
        tabObjets.push("{'sobjectType':'Camping_Item__c', Name:'Du miamiam', Quantity__c:42, Price__c:69.4}");

        for(let i=0;i<tabObjets.length;i++) {
            console.log(tabObjets[i]);
            console.log(JSON.stringify(tabObjets[i]));
        }

        component.set("v.objetsCamping", tabObjets);
    }
})

And the component (that I think works well, already worked on fixing issues)

<aura:component >
    <!-- mon attribut de component -->
    <aura:attribute name="item"
                    type="Camping_Item__c[]"
                    required="true"
                    default="{'sobjectType':'Camping_Item__c',
                             'Name':'nomObjet',
                             '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 />
</aura:component>

And its controller :

({
    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);
    }
})

Could you help ? I've read many topics but can't really find my answer ... :!

2

I see two primary issues here.

let tabObjets = [];
tabObjets.push("{'sobjectType':'Camping_Item__c', Name:'tente', Quantity__c:1, Price__c:149.99}");

You're pushing JSON, rather than actual objects. When you set the default value of an object attribute, like

<aura:attribute type="Camping_Item__c"
                name="objetsCamping"
                default="{'sobjectType':'Camping_Item__c', Name:'tente', Quantity__c:1, Price__c:149.99}"/>

You quote your object literal because you're in markup, not JavaScript. In the controller itself, you should write object literals - otherwise, what you'll come out with is a list of strings, not a list of objects.

You also have an issue with your <aura:iteration>:

<aura:iteration items="objetsCamping" var="obj">

items must have an expression here against your component's value provider:

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

and lastly, you'll have to actually pass obj, the iteration variable, to the child component to give it something to display:

    <c:campingListItem item="{! obj }" />
  • Thanks ! About the second issue, I admit I didn't see it (focused on the first one), but already learnt it... Or thought so ! – Alexis MASSON Jan 14 at 14:11
  • But for the first one, how could I push Camping_Item__c ? Javascript won't accept those objects, I'm a little lost there -even if I understand your answer ! In fact, how to I 'write object literals' ?? – Alexis MASSON Jan 14 at 14:12
  • Just remove the quotes wrapping what you have. It's already a JavaScript object literal, and that's what Lightning expects. – David Reed Jan 14 at 14:13
  • You're already writing object literals. That's the data in {} with key value pairs. – David Reed Jan 14 at 14:14
  • Owh... I may have to work about this notion your pointing, thanks for that ! I'm trying right now with your advices, and be back soon - thanks !! – Alexis MASSON Jan 14 at 14:15
0

Thanks to you, I'm making progress but it's not working correctly however : it does display the component 3 times (and my set of datas for initializing the app counts 3 objects) so it's a start,

But only the component is displayed not the datas themselves..

That looks like this (page + console) :

enter image description here

I think I understood your previous explanation, and changed well my code ?

App :

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

<!-- 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.js :

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

    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]);
    }

    // send the datas back to app
    component.set("v.objetsCamping", tabObjets);
} })

Component :

<!-- 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 />

And componentController.js :

({
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

    cmp.set("v.item.Packed__c", true);
    bouton.set("v.disabled", true); // yeaaaah ça fonctionne !!

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

I feel terrible..

  • 1
    Hey Alexis, don't feel bad, this is tricky stuff to adapt to if you haven't worked on front end before (I hadn't!) - this looks like it might be a separate question post, though, and definitely needs to not be an answer post. – David Reed Jan 14 at 14:52
  • I agree, is it better if I EDIT my first question ? – Alexis MASSON Jan 14 at 15:08
  • 1
    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. – David Reed Jan 14 at 15:13
  • Posted it there ! Thanks a lot for your help, I appreciate ! Already helped a lot my understanding of the situation. salesforce.stackexchange.com/questions/246550/… – Alexis MASSON Jan 14 at 16:25

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.