使用html和javascript构建树/嵌套树视图

Question

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

理想的输出如下：

["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特别是文件夹和嵌套文件夹树视图来实现上面的视图？

由于

Answer 1

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

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

Answer 2

您可以使用此工具http://codedestine.com/json-editor.html来显示您的json。它还有许多功能可以编辑和创建json。