javascript - 使用 html 和 javascript 构建树/嵌套 TreeView

Question

我有以下 JSON 数据。我想使用以下数据构建树/嵌套 TreeView 。

理想的输出如下:

["carbon.agents.vagrant-ubuntu-precise-64-a.avgUpdateTime", "carbon.agents.vagrant-ubuntu-precise-64-a.cache.overflow", "carbon.agents.vagrant-ubuntu-precise-64-a.cache.queries", "carbon.agents.vagrant-ubuntu-precise-64-a.cache.queues", "carbon.agents.vagrant-ubuntu-precise-64-a.cache.size", "carbon.agents.vagrant-ubuntu-precise-64-a.committedPoints", "carbon.agents.vagrant-ubuntu-precise-64-a.cpuUsage", "carbon.agents.vagrant-ubuntu-precise-64-a.creates", "carbon.agents.vagrant-ubuntu-precise-64-a.errors", "carbon.agents.vagrant-ubuntu-precise-64-a.memUsage", "carbon.agents.vagrant-ubuntu-precise-64-a.metricsReceived", "carbon.agents.vagrant-ubuntu-precise-64-a.pointsPerUpdate", "carbon.agents.vagrant-ubuntu-precise-64-a.updateOperations", "carbon.aggregator.vagrant-ubuntu-precise-64-a.aggregateDatapointsSent", "carbon.aggregator.vagrant-ubuntu-precise-64-a.allocatedBuffers", "carbon.aggregator.vagrant-ubuntu-precise-64-a.bufferedDatapoints", "carbon.aggregator.vagrant-ubuntu-precise-64-a.cpuUsage", "carbon.aggregator.vagrant-ubuntu-precise-64-a.memUsage", "carbon.aggregator.vagrant-ubuntu-precise-64-a.metricsReceived", "stats.gauges.echo_server.throughput", "stats.gauges.logstash.host.10.0.1.8.cpu", "stats.gauges.logstash.host.10.0.1.8.memory_free", "stats.gauges.logstash.host.10.0.1.8.memory_total", "stats.gauges.logstash.host.10.0.1.8.rx_byte", "stats.gauges.logstash.host.10.0.1.8.rx_packets", "stats.gauges.logstash.host.10.0.1.8.tx_byte", "stats.gauges.logstash.host.10.0.1.8.tx_packets", "stats.gauges.logstash.host.general.request_time", "stats.gauges.logstash.host.nginx-lb0.act_conns"]

我想实现以下输出:

我能够解析 json，我们如何使用 HTML 和 JS 实现上述 View ，特别是文件夹和嵌套文件夹 TreeView ？

谢谢

Answer 1

有一个在线工具可以做到这一点。 http://jsontree.com/ 。您可以尝试此方法来可视化 json 数据。

此外，由于您有兴趣实现 html/js 解决方案。试试jsTree jquery 插件。