Angular前端展示JSON结构化数据

方案一：通过ngx-json-viewer插件渲染

// 1.安装包
npm install ngx-json-viewer --save

// 2.引入所需模块
import { NgxJsonViewerModule } from 'ngx-json-viewer';
imports: [
    ...,
    NgxJsonViewerModule
]

// 3.HTML中引用查看组件 testJson = JSON.parse(jsonText)
<ngx-json-viewer [json]="testJson"></ngx-json-viewer>

效果图

方案二：通过jquery.json-viewer插件渲染。 注：其他前端框架通用

// 1.手动引入jquery.json-viewer所需文件
<link href="/css/jquery.json-viewer.css" type="text/css" rel="stylesheet" />
<script src="/js/jquery-1.11.0.min.js"></script>
<script src="/js/jquery.json-viewer.js"></script>

// 2.在html中设置放置容器
<div class="jsonContent" id="jsonContent"></div>

// 3.渲染数据
const options = {
    collapsed: false, // 是否收缩所有的节点
    withQuotes: true // 是否为Key添加双引号
};
// @ts-ignore
$('#jsonContent').jsonViewer(this.testJson1,options);

效果图