使用 LWC 自定义组件展示层级 JSON 数据树

import { LightningElement, api, track } from 'lwc';
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
import jquery from '@salesforce/resourceUrl/jquery';
import jsonViewer from '@salesforce/resourceUrl/jsonViewer';

export default class JsonTreeViewer extends LightningElement {
    @api jsonData; // 接收 JSON 数据
    @track isLibLoaded = false;

    renderedCallback() {
        if (this.isLibLoaded) {
            return;
        }
        Promise.all([
            loadScript(this, jquery + '/jquery.min.js'),
            loadScript(this, jsonViewer + '/jquery.jsonview.js'),
            loadStyle(this, jsonViewer + '/jquery.jsonview.css')
        ])
            .then(() => {
                this.isLibLoaded = true;
                this.initJsonViewer();
            })
            .catch(error => {
                console.error('Error loading libraries', error);
            });
    }

    initJsonViewer() {
        if (this.isLibLoaded && this.jsonData) {
            const container = this.template.querySelector('.json-container');
            $(container).JSONView(JSON.parse(this.jsonData)); // 解析 JSON 字符串
        }
    }
}

<template>
    <template if:true={isLibLoaded}>
        <div class="json-container"></div>
    </template>
    <template if:false={isLibLoaded}>
        <div>Loading...</div>
    </template>
</template>

<c-json-tree-viewer json-data='{ "name": "John", "age": 30, "city": "New York" }'></c-json-tree-viewer>