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
Renato Barucco 11Renato Barucco 11 

Loop through Array in LWC to change values

I have an Array in LWC that have these values:

[
    {
        "apiName": "Designer_Hier__c",
        "filterItems": [
            {
                "label": "LP",
                "selected": false,
                "value": "Designer_Hier__c = 'LP'"
            },
            {
                "label": "OTHER NON RINSE OFF TREATMENT",
                "selected": false,
                "value": "Designer_Hier__c = 'OTHER NON RINSE OFF TREATMENT'"
            }
        ],
        "header": "Grife"
    },
    {
        "apiName": "Brand_Hier__c",
        "filterItems": [
            {
                "label": "COLOR SUPREME",
                "selected": false,
                "value": "Brand_Hier__c = 'COLOR SUPREME'"
            }
        ],
        "header": "Marca"
    },
    {
        "apiName": "SubBrand_Hier__c",
        "filterItems": [
            {
                "label": "COLOR SUPREME",
                "selected": false,
                "value": "SubBrand_Hier__c = 'COLOR SUPREME'"
            }
        ],
        "header": "Sub-marca"
    },
    {
        "apiName": "Reference_Hier__c",
        "filterItems": [
            {
                "label": "COLOR SUPREME 50ML T",
                "selected": false,
                "value": "Reference_Hier__c = 'COLOR SUPREME 50ML T'"
            }
        ],
        "header": "Referência"
    },
    {
        "apiName": "Color_Hier__c",
        "filterItems": [
            {
                "label": "BRONZE 7,41",
                "selected": false,
                "value": "Color_Hier__c = 'BRONZE 7,41'"
            }
        ],
        "header": "Nuance"
    },
    {
        "apiName": "Axis_Hier__c",
        "filterItems": [
            {
                "label": "HAIR",
                "selected": false,
                "value": "Axis_Hier__c = 'HAIR'"
            }
        ],
        "header": "Eixo"
    },
    {
        "apiName": "SubAxis_Hier__c",
        "filterItems": [
            {
                "label": "HAIR COLOR",
                "selected": false,
                "value": "SubAxis_Hier__c = 'HAIR COLOR'"
            }
        ],
        "header": "Sub-eixo"
    },
    {
        "apiName": "Class_Hier__c",
        "filterItems": [
            {
                "label": "OXYDATION HAIR COLOR OXYDANTS",
                "selected": false,
                "value": "Class_Hier__c = 'OXYDATION HAIR COLOR OXYDANTS'"
            }
        ],
        "header": "Classe"
    },
    {
        "apiName": "FuntionName__c",
        "filterItems": [
            {
                "label": "OXIDIZATION HAIR COLOR",
                "selected": false,
                "value": "FuntionName__c = 'OXIDIZATION HAIR COLOR'"
            }
        ],
        "header": "Função"
    },
    {
        "apiName": "Category__c",
        "filterItems": [
            {
                "label": "COLORAÇÃO",
                "selected": false,
                "value": "Category__c = 'COLORAÇÃO'"
            }
        ],
        "header": "Categoria"
    }
]


I want to change the header value of the array if the logged in user has a defined language (en-US, pt-BR, es).

I will use the 

import LANG from '@salesforce/i18n/lang'

and change the header value for each language if LANG = one of these three languages.

How I call the function:

@wire(initFilters, {filterVal: '$list', doInit: '$initDo', existingFiltersStr: '$existingFilters'})
    wiredinitFilters({error, data}) {
        if(data) {
            this.filterObjs = data
            this.error = undefined
        }
        if(error) {
            this.filterObjs = undefined
            this.error = error
        }
    }

How I get this array:

this.temp = this.filterObjs.filters

how can I loop through the array and change these values in LWC?

mukesh guptamukesh gupta
Hi REnato,

lengArr = ['en-US', 'pt-BR', 'es'];

updateArr;
if(lengArr.IndexOf(LENG) != -1 ){
  
this.temp.forEach((item)=>{
   item.header = LENG;
this.updateArr.push(item);
})
}

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh 
Renato Barucco 11Renato Barucco 11

Hi Mukesh! Thanks for the answer!

I need to change the values of header content of each item. If pt-BR, the headers should be:

Grife
Marca
Sub-marca
Referência
Nuance
Eixo
Sub-eixo
Classe
Função
Categoria

if the language is en-US:

Designer label
Brand
Sub-brand
Reference
nuance
Axle
sub-axis
Class
Occupation
Category

This makes sense?

Regards,
Renato
Renato Barucco 11Renato Barucco 11

use this information like this in LWC:

<div class="page-section page-right filtersection">
    <lightning-button variant="neutral" class="slds-align_absolute-center" label={cleanFilterLabel} title={cleanFilterLabel} type="text" onclick={reset}></lightning-button>
    <lightning-accordion active-section-name="A">
        <lightning-accordion-section name="A" label={filterSectionLabel}>
            <template for:each={filterObjs.filters} for:item="header">
                <p key={header.header} class="slds-align_absolute-center label">{header.header}</p>
                <div key={header.header} class="slds-scrollable_y" style="height:6rem">
                    <template for:each={header.filterItems} for:item="item">
                        <ul key={item.header} class="testee slds-p-left_medium slds-p-left_x-small">
                            <li key={item.header} class=""><lightning-input type="checkbox" label={item.label} name={item.value} checked={item.selected} data-id={item.value} onchange={onCheck} key={item.header}></lightning-input></li>
                        </ul>
                    </template>
                </div>
                <hr key={header.header} class="slds-m-vertical_small"></hr>
            </template>
        </lightning-accordion-section> 
    </lightning-accordion>
</div>