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

玲弟啊玲弟

于 2018-09-27 16:51:15 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js yaml json

本文链接：https://blog.youkuaiyun.com/github_38097011/article/details/82869540

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不是纯文本的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"}}