使用 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。