Lightning components - Initiating attribute with controller with multiples sObjects

Question

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

Answer 1

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 }" />

Answer 2

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) :

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..