昨天写了一篇关于JSON格式化输出到页面上——数组+对象+JSON字符串+汉字——基础积累的文章，效果是可以实现的

但是如果要实现右侧部分的展开/折叠，则可以使用到下面的插件了@pgrabovets/json-view

github链接：https://github.com/pgrabovets/json-view

效果图：

步骤1：安装@pgrabovets/json-view

npm install '@pgrabovets/json-view'

cdn引入的方式也是有的，可以看上面的链接

步骤2：页面引入

import jsonview from '@pgrabovets/json-view';

步骤3：获取json数据并渲染到DOM上

如果已经有了DOM节点，则可以使用下面的方式来渲染

// get json data
const data = '{"name": "json-view","version": "1.0.0"}';
// create json tree object
const tree = jsonview.create(data);
// render tree into dom element
jsonview.render(tree, document.querySelector('.tree'));

如果你还没有DOM节点，则可以使用下面的：

// you can render json data without creating tree
const tree = jsonview.renderJSON(data, document.querySelector('.tree'));

步骤4：其他方法

// expand tree
jsonview.expand(tree);
// collapse tree
jsonview.collapse(tree);
// traverse tree object
jsonview.traverse(tree, function(node) {
  console.log(node);
});
// function toggles between show or hide
jsonview.toggleNode(tree);
// destroy and unmount json tree from the dom
jsonview.destroy(tree);

完成！！！多多积累，多多收获！！！