function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
meghna nmeghna n 

attribute value in span tag in lightning

I have a piece of code which will display number of stars depending upon the attribute value as follows

 <aura:attribute name="ratingValue" type="List"/>
    
    <aura:iteration items="{!v.ratingValue}" var="rating" indexVar="indx">
                                   <aura:if isTrue="{!rating == 1}">
                                              <b>*</b>
                                   </aura:if>
                                   <aura:if isTrue="{!rating == 2}">
                                              <b>* *</b>
                                   </aura:if>
                                   <aura:if isTrue="{!rating == 3}">
                                              <b>* * *</b>
                                   </aura:if>
                                   <aura:if isTrue="{!rating == 4}">
                                              <b>* * * *</b>
                                   </aura:if>
                             </aura:iteration>

 <span>{!v.ratingValue} ratings</span>&nbsp;&nbsp;<lightning:icon iconName="standard:sales_path" size="x-small"/>

In the controller of the above component
({
    doInit : function(component, event, helper) {
        
      component.set("v.ratingValue",3);
    }
})

Based on the attribute value I am able to display the stars but {!v.ratingValue} inside the component is not showing any value even though it is set in the controller.

Please let me know if some issue in my code with some correct piece of working code.

thanks
meghna
Best Answer chosen by meghna n
Khan AnasKhan Anas (Salesforce Developers) 
Oh my bad! Actually, ratingValue attribute is of a List type. You can use it in iteration component. However, you can use aura:text. It renders plain text. When any free text (not a tag or attribute value) is found in markup, an instance of this component is created with the value attribute set to the text found in the markup.

Use below code: 
<aura:component >
    
    <aura:attribute name="ratingValue" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <aura:iteration items="{!v.ratingValue}" var="rating" indexVar="indx">
        <aura:if isTrue="{!rating == 1}">
            <b>*</b>
        </aura:if>
        <aura:if isTrue="{!rating == 2}">
            <b>* *</b>
        </aura:if>
        <aura:if isTrue="{!rating == 3}">
            <b>* * *</b>
        </aura:if>
        <aura:if isTrue="{!rating == 4}">
            <b>* * * *</b>
        </aura:if>
    </aura:iteration>

    <span><aura:text value="{!v.ratingValue}"></aura:text> ratings</span>&nbsp;&nbsp;<lightning:icon iconName="standard:sales_path" size="x-small"/>
</aura:component>

Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Meghna,

Greetings to you!

Your code looks good to me. I have checked in my org and it is working as expected. I suggest you to check init handler in component as lightning is based on aura framework which is a type of JavaScript and JavaScript is case sensitive so lightning is case sensitive. 

Component: 
<aura:component >
    
    <aura:attribute name="ratingValue" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <aura:iteration items="{!v.ratingValue}" var="rating" indexVar="indx">
        <aura:if isTrue="{!rating == 1}">
            <b>*</b>
        </aura:if>
        <aura:if isTrue="{!rating == 2}">
            <b>* *</b>
        </aura:if>
        <aura:if isTrue="{!rating == 3}">
            <b>* * *</b>
        </aura:if>
        <aura:if isTrue="{!rating == 4}">
            <b>* * * *</b>
        </aura:if>
    </aura:iteration>
    
    <span>{!v.ratingValue} ratings</span>&nbsp;&nbsp;<lightning:icon iconName="standard:sales_path" size="x-small"/>
</aura:component>

Controller: 
({
    doInit : function(component, event, helper) {
        
        component.set("v.ratingValue",3);
    }
})

Application: 
<aura:application extends="force:slds">
    <c:RatingComponent/>
</aura:application>

Screenshot:
User-added image

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
meghna nmeghna n
Hi Khan

In the doInit event if I am setting a value of 3 then the output should look like this. I am getting the stars based on the value set in the attribute but the value of attribute I want as  {!v.ratingValue}  i.e 3 ratings

* * *
3 ratings

thanks
meghna
Khan AnasKhan Anas (Salesforce Developers) 
Oh my bad! Actually, ratingValue attribute is of a List type. You can use it in iteration component. However, you can use aura:text. It renders plain text. When any free text (not a tag or attribute value) is found in markup, an instance of this component is created with the value attribute set to the text found in the markup.

Use below code: 
<aura:component >
    
    <aura:attribute name="ratingValue" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <aura:iteration items="{!v.ratingValue}" var="rating" indexVar="indx">
        <aura:if isTrue="{!rating == 1}">
            <b>*</b>
        </aura:if>
        <aura:if isTrue="{!rating == 2}">
            <b>* *</b>
        </aura:if>
        <aura:if isTrue="{!rating == 3}">
            <b>* * *</b>
        </aura:if>
        <aura:if isTrue="{!rating == 4}">
            <b>* * * *</b>
        </aura:if>
    </aura:iteration>

    <span><aura:text value="{!v.ratingValue}"></aura:text> ratings</span>&nbsp;&nbsp;<lightning:icon iconName="standard:sales_path" size="x-small"/>
</aura:component>

Regards,
Khan Anas
This was selected as the best answer
meghna nmeghna n
Hello Khan

This worked. I was looking for this piece of info.

thanks very much

meghna