如何在Salesforce前端展示Apex类返回的大型JSON输出

步骤1：Apex层准备数据接口 #

先封装Apex类，返回结构化数据（比直接返回JSON字符串更易前端处理）。如果是自定义数据结构，用内部类封装字段：

public with sharing class DataController {
    @AuraEnabled(cacheable=true)
    public static List<CustomData> getLargeData() {
        // 替换为你生成JSON的业务逻辑，返回结构化数据列表
        List<CustomData> dataList = new List<CustomData>();
        // 模拟示例数据
        dataList.add(new CustomData('张三', '研发部', 10000));
        dataList.add(new CustomData('李四', '市场部', 8000));
        return dataList;
    }

    // 自定义数据类，字段需加@AuraEnabled让LWC可访问
    public class CustomData {
        @AuraEnabled
        public String name {get; set;}
        @AuraEnabled
        public String department {get; set;}
        @AuraEnabled
        public Integer salary {get; set;}

        public CustomData(String n, String d, Integer s) {
            name = n;
            department = d;
            salary = s;
        }
    }
}

如果已有JSON字符串，可在Apex中用JSON.deserialize()转成对象列表后返回。

步骤2：LWC组件实现固定字段表格 #

HTML模板（用SLDS样式做简洁表格） #

<template>
    <lightning-card title="数据展示">
        <div class="slds-p-around_medium">
            <table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer">
                <thead>
                    <tr class="slds-line-height_reset">
                        <th scope="col">
                            <div class="slds-truncate" title="姓名">姓名</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate" title="部门">部门</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate" title="薪资">薪资</div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 循环渲染数据行 -->
                    <template for:each={dataList} for:item="item">
                        <tr key={item.name}>
                            <td>
                                <div class="slds-truncate" title={item.name}>{item.name}</div>
                            </td>
                            <td>
                                <div class="slds-truncate" title={item.department}>{item.department}</div>
                            </td>
                            <td>
                                <div class="slds-truncate" title={item.salary}>{item.salary}</div>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
            <!-- 无数据提示 -->
            <template if:true={isNoData}>
                <div class="slds-align_absolute-center slds-m-top_large">暂无数据</div>
            </template>
        </div>
    </lightning-card>
</template>

JS逻辑（调用Apex获取数据） #

import { LightningElement, wire } from 'lwc';
import getLargeData from '@salesforce/apex/DataController.getLargeData';

export default class DataTableDisplay extends LightningElement {
    dataList = [];
    isNoData = false;

    @wire(getLargeData)
    wiredData({ error, data }) {
        if (data) {
            this.dataList = data;
            this.isNoData = data.length === 0;
        } else if (error) {
            console.error('数据加载失败:', error);
            this.isNoData = true;
        }
    }
}

XML配置（设置组件可见性） #

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

这个组件自带SLDS的边框、条纹样式，字段内容过长会自动截断，适合大量数据滚动展示。

步骤3：动态JSON（字段不固定）的处理方案 #

如果JSON字段不确定，可通过JS动态生成表格：

修改JS逻辑 #

import { LightningElement, wire } from 'lwc';
import getLargeJson from '@salesforce/apex/DataController.getLargeJson'; // 假设返回JSON字符串

export default class DynamicDataTable extends LightningElement {
    @wire(getLargeJson)
    wiredJson({ error, data }) {
        const container = this.template.querySelector('[lwc:dom="manual"]');
        if (data) {
            const jsonData = JSON.parse(data);
            if (jsonData.length === 0) {
                container.innerHTML = '<div class="slds-align_absolute-center">暂无数据</div>';
                return;
            }
            // 提取表头字段
            const headers = Object.keys(jsonData[0]);
            // 拼接表格HTML
            let tableHtml = '<table class="slds-table slds-table_bordered slds-table_striped"><thead><tr>';
            headers.forEach(header => {
                tableHtml += `<th><div class="slds-truncate">${header}</div></th>`;
            });
            tableHtml += '</tr></thead><tbody>';
            // 拼接数据行
            jsonData.forEach(item => {
                tableHtml += '<tr>';
                headers.forEach(header => {
                    tableHtml += `<td><div class="slds-truncate">${item[header] || '-'}</div></td>`;
                });
                tableHtml += '</tr>';
            });
            tableHtml += '</tbody></table>';
            container.innerHTML = tableHtml;
        } else if (error) {
            console.error('JSON加载失败:', error);
            container.innerHTML = '<div class="slds-text-color_error">数据加载失败</div>';
        }
    }
}

修改HTML模板 #

<template>
    <lightning-card title="动态数据展示">
        <div class="slds-p-around_medium" lwc:dom="manual"></div>
    </lightning-card>
</template>

注意：动态生成HTML时要确保数据安全，若数据含特殊字符，需提前转义避免XSS风险。

Flexcards简化方案（适合固定字段场景） #

1. 先在Apex中将JSON转成Salesforce可识别的集合（如自定义对象列表、自定义设置）
2. 在Flexcard中添加Data Source，关联你的Apex类获取数据
3. 拖入Table组件，绑定对应字段，启用SLDS样式
4. 将Flexcard部署到目标页面，调整布局即可

Flexcards对动态字段支持有限，适合字段固定、快速搭建的场景。

内容的提问来源于stack exchange，提问作者tomilaser1