Get List From Salesforce Object

Apex Coding with Logging

public with sharing class PreferenceCenterController {
    public class SubscriptionOption {        @AuraEnabled public String id { get; set; }        @AuraEnabled public String name { get; set; }
        public SubscriptionOption(String id, String name) {            System.debug('Constructor called with id=' + id + ', name=' + name);
            this.id = id;            this.name = name;
            System.debug('Object created → id=' + this.id + ', name=' + this.name);        }    }
    @AuraEnabled(cacheable=true)    public static List<SubscriptionOption> getSubscriptions() {
        System.debug('--- Method Started ---');
        List<SubscriptionOption> subscriptions = new List<SubscriptionOption>();        System.debug('Empty list created: ' + subscriptions);
        List<ssot__CommunicationSubscription__dlm> records = [            SELECT ssot__Id__c, ssot__Name__c            FROM ssot__CommunicationSubscription__dlm            ORDER BY ssot__Name__c            LIMIT 100        ];
        System.debug('Records fetched from DB: ' + records);
        for (ssot__CommunicationSubscription__dlm record : records) {
            System.debug('Processing record: ' + record);
            SubscriptionOption option = new SubscriptionOption(                record.ssot__Id__c,                record.ssot__Name__c            );
            System.debug('Before adding to list: ' + subscriptions);
            subscriptions.add(option);
            System.debug('After adding to list: ' + subscriptions);        }
        System.debug('Final list before return: ' + subscriptions);        System.debug('--- Method Ended ---');
        return subscriptions;    }}

APex Result

--- Method Started ---
Empty list created: ()
Records fetched from DB:(Record1, Record2, Record3)
Processing record: Record1Constructor called with id=1, name=Email UpdatesObject created → id=1, name=Email Updates
Before adding to list: ()After adding to list: ((id=1, name=Email Updates))
Processing record: Record2Constructor called with id=2, name=SMS AlertsObject created → id=2, name=SMS Alerts
Before adding to list: ((id=1, name=Email Updates))After adding to list: ((id=1, name=Email Updates), (id=2, name=SMS Alerts))
Final list before return:((id=1, name=Email Updates), (id=2, name=SMS Alerts))
--- Method Ended ---

Javascript Connecting APex

import { LightningElement, wire } from 'lwc';import getSubscriptions from '@salesforce/apex/PreferenceCenterController.getSubscriptions';
const MARKETING_SUBSCRIPTION_LABELS = {    'intelligence-marcomms': 'Economist Enterprise EIU and Corporate Network',    'enterprise-marcomms': 'The Economist Pro',    'impact-marcomms': 'Economist Enterprise Media',    'education-marcomms': 'Economist Education',    'impactevents-marcomms': 'Economist Enterprise Events'};
export default class PreferenceCenter extends LightningElement {    subscriptions;    error;
    @wire(getSubscriptions)    wiredSubscriptions({ error, data }) {        if (data) {            this.subscriptions = data;            this.error = undefined;            console.log('Subscriptions loaded:', data);            console.log('Marketing subscriptions:', this.marketingSubscriptions);        } else if (error) {            this.error = this.reduceError(error);            this.subscriptions = undefined;            console.error('Subscription load error:', JSON.stringify(error));        }    }
    get marketingSubscriptions() {        if (!this.subscriptions) {            return [];        }
        return this.subscriptions            .filter((subscription) => MARKETING_SUBSCRIPTION_LABELS[subscription.name])            .map((subscription) => ({                id: subscription.id,                name: subscription.name,                label: MARKETING_SUBSCRIPTION_LABELS[subscription.name]            }));    }
    get hasMarketingSubscriptions() {        return this.marketingSubscriptions.length > 0;    }
    get showMarketingSubscriptionsEmptyState() {        return Array.isArray(this.subscriptions) && this.subscriptions.length > 0 && !this.hasMarketingSubscriptions;    }
    reduceError(error) {        if (!error) {            return 'Could not load subscriptions.';        }
        if (Array.isArray(error.body)) {            return error.body.map((item) => item.message).join(', ');        }
        if (error.body && typeof error.body.message === 'string') {            return error.body.message;        }
        if (typeof error.message === 'string') {            return error.message;        }
        return 'Could not load subscriptions.';    }}

Javascript Code explanations

🚀 1. Where does execution START?It starts from this line:@wire(getSubscriptions)👉 This tells LWC:“Hey, call the Apex method getSubscriptions() automatically when the component loads.”
🔁 2. FULL FLOW (Big Picture)LWC loads ↓@wire calls Apex method ↓Apex returns data (list of subscriptions) ↓wiredSubscriptions() runs ↓Data stored in this.subscriptions ↓Getter methods process data ↓UI displays result
🧩 3. Step-by-step Explanation
🟢 STEP 1: Import sectionimport { LightningElement, wire } from 'lwc';import getSubscriptions from '@salesforce/apex/PreferenceCenterController.getSubscriptions';🔍 What happens?

LightningElement → Base class (like a parent class)
wire → Used to call Apex automatically
getSubscriptions → Your Apex method

👉 Think:“I’m connecting my JS to Apex backend”
🟢 STEP 2: Static Label Mappingconst MARKETING_SUBSCRIPTION_LABELS = {   'intelligence-marcomms': 'Economist Enterprise EIU and Corporate Network',   ...};🔍 What happens?👉 This is just a lookup table (dictionary)📦 Example:'intelligence-marcomms' → 'Economist Enterprise EIU and Corporate Network'👉 Used later to convert technical names → user-friendly labels
🟢 STEP 3: Variablessubscriptions;error;📦 Initial state:subscriptions = undefinederror = undefined
🟢 STEP 4: Wire method (MAIN EXECUTION)@wire(getSubscriptions)wiredSubscriptions({ error, data })👉 This runs automatically when data comes from Apex
🟩 CASE 1: SUCCESS (data received)if (data) {📦 Example data from Apex:data = [ { id: '1', name: 'intelligence-marcomms' }, { id: '2', name: 'random-subscription' }]
🔹 Assign values:this.subscriptions = data;this.error = undefined;📦 Now:this.subscriptions = [ { id: '1', name: 'intelligence-marcomms' }, { id: '2', name: 'random-subscription' }]
🔹 Console logs:console.log('Subscriptions loaded:', data);👉 Output:Subscriptions loaded: [ {...}, {...} ]
🔹 This line triggers getter:console.log('Marketing subscriptions:', this.marketingSubscriptions);👉 This calls the getter below 👇
🟢 STEP 5: Getter → marketingSubscriptionsget marketingSubscriptions()👉 This runs every time it's accessed
🔹 First check:if (!this.subscriptions) {   return [];}👉 If no data → return empty array
🔹 Main logic:return this.subscriptions   .filter(...)   .map(...)
🔍 FILTER step.filter((subscription) => MARKETING_SUBSCRIPTION_LABELS[subscription.name])👉 Keeps only matching subscriptions
📦 Example:Input:[ { id: '1', name: 'intelligence-marcomms' }, { id: '2', name: 'random-subscription' }]After filter:[ { id: '1', name: 'intelligence-marcomms' }]👉 Because only this exists in the mapping
🔍 MAP step.map((subscription) => ({   id: subscription.id,   name: subscription.name,   label: MARKETING_SUBSCRIPTION_LABELS[subscription.name]}));
📦 Final Output:[ {   id: '1',   name: 'intelligence-marcomms',   label: 'Economist Enterprise EIU and Corporate Network' }]
🟢 STEP 6: Getter → hasMarketingSubscriptionsget hasMarketingSubscriptions() {   return this.marketingSubscriptions.length > 0;}📦 Output:true // if at least 1 recordfalse // if empty
🟢 STEP 7: Getter → Empty State Logicget showMarketingSubscriptionsEmptyState()👉 Condition:subscriptions existAND subscriptions.length > 0AND no marketing subscriptions
📦 Example:subscriptions = [ {name: 'random'} ]marketingSubscriptions = []👉 Output:true
🟢 STEP 8: Error HandlingreduceError(error)👉 Converts complex error → readable message
📦 Example:Input:error.body.message = "Permission denied"Output:"Permission denied"
🧠 FINAL VISUAL FLOWComponent loads  ↓@wire calls Apex  ↓Apex returns data  ↓wiredSubscriptions runs  ↓Store data in this.subscriptions  ↓Getter runs (marketingSubscriptions)  ↓Filter + map data  ↓UI uses processed data

HTML Coding

<template if:true={error}> <p class="status-message error-message">{error}</p> </template> <template if:true={hasMarketingSubscriptions}> <template for:each={marketingSubscriptions} for:item="sub"> <label class="checkbox-row" key={sub.id}> <input type="checkbox" /> <span>{sub.label}</span> </label> </template> </template> <template if:true={showMarketingSubscriptionsEmptyState}> <p class="status-message">Subscriptions loaded, but none matched the expected marketing subscription names.</p> </template>

HTML Coding Explanations

🚀 1. Big Picture (How this template works)JS (data + getters)       ↓HTML template (this code)       ↓UI shows different sections based on conditions👉 These <template if:true={...}> are like “IF conditions” in UI
🧩 2. First Block → Error Handling<template if:true={error}>   <p class="status-message error-message">{error}</p></template>🔍 What happens?👉 If error has a value → show this message
📦 Example:this.error = "Permission denied";🖥️ UI Output:Permission denied
❌ If no error:this.error = undefined;👉 This block is completely hidden
🧩 3. Second Block → Show Subscriptions<template if:true={hasMarketingSubscriptions}>👉 This depends on your JS getter:get hasMarketingSubscriptions() {   return this.marketingSubscriptions.length > 0;}
🔁 Loop inside (VERY IMPORTANT)<template for:each={marketingSubscriptions} for:item="sub">👉 This means:“Loop through each item in marketingSubscriptions”
📦 Example Data:marketingSubscriptions = [ { id: '1', label: 'Economist Enterprise EIU...' }, { id: '2', label: 'The Economist Pro' }]
🖥️ What gets rendered:<label class="checkbox-row">   <input type="checkbox" />   <span>Economist Enterprise EIU...</span></label>
<label class="checkbox-row">   <input type="checkbox" />   <span>The Economist Pro</span></label>
🔑 Important line:key={sub.id}👉 This helps LWC:“Track each item uniquely for performance”
🧩 4. Third Block → Empty State<template if:true={showMarketingSubscriptionsEmptyState}>👉 Controlled by this JS:get showMarketingSubscriptionsEmptyState() {   return Array.isArray(this.subscriptions)       && this.subscriptions.length > 0       && !this.hasMarketingSubscriptions;}
🔍 Meaning:Show message ONLY when:

Data is loaded ✅
Data is NOT empty ✅
BUT no matching marketing subscriptions ❌

📦 Example:subscriptions = [ { name: 'random1' }, { name: 'random2' }]
marketingSubscriptions = []
🖥️ UI Output:Subscriptions loaded, but none matched the expected marketing subscription names.
🧠 5. Full Visual Flow           Data comes from Apex                    ↓        stored in this.subscriptions                    ↓       marketingSubscriptions getter runs                    ↓       hasMarketingSubscriptions calculated                    ↓  ┌─────────────── UI Rendering ───────────────┐
  IF error → show error message
  ELSE IF hasMarketingSubscriptions → show checkboxes
  ELSE IF empty state → show fallback message
  └────────────────────────────────────────────┘
🔥 6. Real-Life AnalogyThink of this like a restaurant menu system 🍽️

error → Kitchen failed ❌ → show error
marketingSubscriptions → Available dishes ✅ → show list
empty state → No matching dishes 😅 → show message

⚡ 7. Key Concepts You Just LearnedConceptMeaning<template if:true>Conditional rendering<template for:each>Loop{sub.label}Dynamic data bindingkey={sub.id}Unique identitygettersControl UI behavior