JS 递归渲染，json 数据（不包含json 数组）解析成 yaml 文件的格式类型

最新推荐文章于 2023-04-25 20:42:38 发布

原创

最新推荐文章于 2023-04-25 20:42:38 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #yaml #json

博客内容讲述了如何通过JavaScript将JSON数据以递归方式渲染成类似YAML的格式，利用`dl`、`dt`和`dd`元素创建图表形式的展示。在解析过程中，遇到JSON对象时进行递归，对于非JSON的键值对则以表格形式展示。最终，代码示例展示了如何将一个特定的JSON对象转换并附加到HTML面板中。

不是纯文本的yaml ，而是利用的dl dt 来渲染的，做成的是图表的形式，同级的json 前面会有相同的间距，去掉图表的渲染应就是yaml 文本格式了

先是json的图：

效果图 :

js 代码

var jsonHealth =

{"description":"Composite Discovery Client","status":"UP","discoveryComposite":{"description":"Composite Discovery Client","status":"UP","discoveryClient":{"description":"Composite Discovery Client","status":"UP","services":["sba-eureka-example"]},"eureka":{"description":"Remote status from Eureka server","status":"UP","applications":{"SBA-EUREKA-EXAMPLE":2,"ZIPKIN":0,"UNKNOWN":0,"SBA-LIULD":0}}},"diskSpace":{"status":"UP","total":53660876800,"free":22863028224,"threshold":10485760},"hystrix":{"status":"UP"}}