How to Build Dynamic Salesforce LWC Forms Using JSON and Apex?

<template>
    <lightning-card title="Customer Information" icon-name="standard:contact">
        <div class="slds-p-around_medium">
            <lightning-record-edit-form object-api-name="Customer_Info__c"
                class="customerForm" onsubmit={handleFormSubmit}>

                <template if:true={sections}>
                    <template for:each={sections} for:item="section">
                        <div key={section.title} class="slds-section slds-is-open">
                            <h3 class="slds-section__title slds-theme_shade">
                                <span class="slds-truncate">{section.title}</span>
                            </h3>

                            <div class="slds-section__content">
                                <div class="slds-grid slds-wrap">
                                    <template for:each={section.fields} for:item="fieldName">
                                        <div key={fieldName}
                                            class="slds-col slds-size_1-of-2 slds-p-horizontal_small">
                                            <lightning-input-field field-name={fieldName}>
                                            </lightning-input-field>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </template>
                </template>

                <div class="slds-m-top_medium">
                    <lightning-button type="submit"
                        variant="brand"
                        label="Save Info">
                    </lightning-button>
                </div>
            </lightning-record-edit-form>
        </div>
    </lightning-card>
</template>

								import { LightningElement, wire } from 'lwc'; 
import getFormConfig from '@salesforce/apex/CustomerInfoController.getFormConfig'; 
import saveCustomer from '@salesforce/apex/CustomerInfoController.saveCustomer'; 
import { ShowToastEvent } from 'lightning/platformShowToastEvent'; 
import { RefreshEvent } from 'lightning/refresh'; 
 
export default class CustomerForm extends LightningElement { 
	sections; 
 
	// Wire method to fetch form configuration 
	@wire(getFormConfig) 
    wiredConfig({ error, data }) { 
    	if (data) { 
            const config = JSON.parse(data); 
            this.sections = config.sections; 
    	} else if (error) { 
            console.error('Configuration loading error:', error); 
    	} 
	} 
 
	// Form submission handler 
    handleFormSubmit(event) { 
        event.preventDefault(); // Prevent default form submission 
         
        const fields = event.detail.fields; 
 
        saveCustomer({ fieldData: fields }) 
            .then(() => { 
                // Success notification 
                this.dispatchEvent(new ShowToastEvent({ 
                    title: 'Success', 
                    message: 'Customer Record Created Successfully', 
                    variant: 'success' 
                })); 
                 
                // Refresh the view 
                this.dispatchEvent(new RefreshEvent()); 
            }) 
            .catch(error => { 
                console.error('Save error:', error); 
                this.dispatchEvent(new ShowToastEvent({ 
                    title: 'Error', 
                    message: 'Failed to save record: ' + error.body.message, 
                    variant: 'error' 
                })); 
            }); 
	} 
} 

							

							public with sharing class CustomerInfoController { 
     
	@AuraEnabled(cacheable=true) 
	public static String getFormConfig() { 
    	try { 
            // Retrieve configuration from Static Resource 
            StaticResource sr = [SELECT Body  
                                 FROM StaticResource  
                                 WHERE Name = 'CustomerFormConfig'  
                                 LIMIT 1]; 
            return sr.Body.toString(); // Convert Blob to String 
    	} catch (Exception e) { 
            throw new AuraHandledException( 
                'Error loading form configuration: ' + e.getMessage() 
            ); 
    	} 
	} 
 
	@AuraEnabled 
	public static void saveCustomer(Map<String, Object> fieldData) { 
    	try { 
            // Dynamically map fields to the custom object 
            Customer_Info__c newCust = new Customer_Info__c(); 
             
            for(String fieldName : fieldData.keySet()) { 
                newCust.put(fieldName, fieldData.get(fieldName)); 
            } 
             
            insert newCust; 
    	} catch (Exception e) { 
            throw new AuraHandledException( 
                'Error saving record: ' + e.getMessage() 
            ); 
    	} 
	} 
}