1

I'm new to salesforce and development in general, so I'll be as clearer as I can be. I have to make a Lightning web Component that shows filters. The filters are created in apex. I made a class that creates example filters for, in this case, the Account object. There is a method that exports those filters to import them in the lwc:

public static QueryFilters getFilters(){
    QueryFilters filters = new QueryFilters();

    filters.add(new QueryFilters.StringFilter(new QueryFilters.Field(Account.Name)));
    filters.add(new QueryFilters.InFilter(new QueryFilters.FieldOptions(Account.sobjectType, Account.Industry)));
    filters.add(new QueryFilters.NumberFilter(new QueryFilters.Field(Account.NumberOfEmployees, 'Empleados desde'), QueryFilters.Operator.GE));
    filters.add(new QueryFilters.NumberFilter(new QueryFilters.Field(Account.NumberOfEmployees, 'Empleados hasta'), QueryFilters.Operator.LE));
    filters.add(new QueryFilters.FilterWithOperators(new QueryFilters.NumberFilter(new QueryFilters.Field(Account.NumberofLocations__c))));
    filters.add(new QueryFilters.BooleanFilter(new QueryFilters.Field(Account.Tested__c)).selectize());
            
    return filters;
}

@AuraEnabled
public static List<Map<String, Object>> getFiltersJson(){
    return QueryFilters.export((List<QueryFilters.ExportableFilter>)getFilters().filters);
}

I have to iterate the list of filters in the html, but I don't know how to work with a List of Map<String, Object> in the javascript file. These are the html and js files as they are right now:

import { LightningElement, wire } from 'lwc';
import getFiltersJson from '@salesforce/apex/QueryFiltersEj.getFiltersJson';
export default class LwcQueryFilter extends LightningElement {}


<template>
<lightning-card title="Filtros" icon-name="standard:account">
    <template iterator:it={filters}>
        <lightning-input
             onchange={getValue}
             key={it.value.label} 
             if:true={it.value.isInput} 
             type={it.value.type} 
             label={it.value.label}>
        </lightning-input>
        <lightning-input
            onchange={getValue}
            key={it.value.label}
            if:true={it.value.isBoolean}
            type={it.value.type}
            label={it.value.label}>
        </lightning-input>
        <c-lwc-multi-select
            onchange={handleOnChange}
            key={it.value.label}
            if:true={it.value.isMultiSelect}
            label={it.value.label}
            options={it.value.options}>
        </c-lwc-multi-select>
    </template>
</lightning-card>

How do I transform the export that I import with the getFiltersJson, to be able to iterate it?

1

In javascript, you can think of your List<Map<String, Object>> as an array of objects, where List is the array, and each Map in the list is a Javascript object, like:

filters = [ {Id: '1', Name: 'Peter', Age: 28}, {Id: '2', Name: 'Ana', Age: 24}];

In your template, you should just use the LWC for:each or Iterator directive to iterate over the filters variable in you controller.

<lightning-card title="HelloForEach" icon-name="custom:custom14">
    <ul class="slds-m-around_medium">
        <template for:each={filters} for:item="filter">
            <li key={filter.Id}>
                {filter.Name}, {filter.Age}
            </li>
        </template>
    </ul>
</lightning-card>

Refer to this link: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/create_lists

6
  • Ok thanks! So, I just assign the method that I import, to the filters property in my javascript file? I don't need to do anything else? Dec 3 '20 at 14:17
  • exactly! you should not need anything else. have you tried already? Dec 3 '20 at 17:48
  • Hey! I'm not able to log the data. , and when I try to iterate over the list of maps that the apex method returned, it gives me an error: cannot iterate over undefined, must be an array, or something like that. Dec 4 '20 at 12:51
  • Well that may be because you QueryFilters class needs to implement its attributes as public and with the @Auraenabled annotation, have you done it? Maybe taake a look here: salesforce.stackexchange.com/questions/255943/… Dec 4 '20 at 13:09
  • The QueryFilters class, has a List<Filter> filters property, which are actually the filters that I export in the getFiltersJson method. Do I need to make that property as auraenabled too? It is already public Dec 4 '20 at 13:51
0

Looking at the return value in your JavaScript will help you. You will see an array of objects and each object's property value will be either a String, Integer, or Boolean as these are the only primitive data types JSON has a representation for (Dates, DateTimes, non-Integer numbers will be Strings as well).

Example, a List<Map<String, Object>> will be represented like so unless the Object is actually an object:

[
    {
        "key1": "some value",
        "key2": true,
        "key3": 12,
        "key4": '2020-12-03',
        "key5": '3.3333333',
    },
    {
        "key1": "some value",
    }
    {
        "actuallyAnObject": {
            "key1": "some value",
            "key2": "some value",
        }
    }
]

Treating every value as a String should make this easy to put into a <select> in HTML, but based on your code it looks like you want to go beyond that and render a specific control (input[type="text"], input[type="checkbox"] etc.) based on the data type (including a multi-select, which is a String of values delimited by a semicolon). That makes this more complicated, but not impossible. If the return value actually conforms to the shape that your template is expecting then the hard work is done for you.

    onchange={getValue}
    key={it.value.label} 
    if:true={it.value.isInput} 
    type={it.value.type} 
    label={it.value.label}
{
    isInput: true,
    type: Boolean,
    label: "some label"
    value: false
}

Go ahead and share the code and I'll update this post.

4
  • Hey, I'm sorry, I'm at a loss here. With the "return value" what do you mean? Should I do a console log? Dec 3 '20 at 14:30
  • Yes, look at what your Apex method is giving you in your JavaScript controller and go from there.
    – nbrown
    Dec 3 '20 at 14:38
  • I wired the getFiltersJson method to a function that handles error and data (loadFilters({ error, data }) ) and when i do console.log of the data, and check in my local development server, nothing appears in the console. I don't know whats going on Dec 3 '20 at 15:35
  • Please update your question with your code. If you're running the code locally then I am not familiar with what will happen on a local server. developer.salesforce.com/docs/component-library/documentation/…
    – nbrown
    Dec 3 '20 at 15:46

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.