首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Angular JS以类似树的格式呈现JSON

Angular JS以类似树的格式呈现JSON
EN

Stack Overflow用户
提问于 2014-03-04 17:49:21
回答 2查看 20K关注 0票数 15

如何像http://jsonviewer.stack.hu/使用angular JS那样以树状的方式呈现JSON?

EN

回答 2

Stack Overflow用户

发布于 2014-08-05 01:19:50

我制作了这个Angular指令,以便以一种很好的方式呈现JSON。它在bower中可用:

https://github.com/mohsen1/json-formatter

票数 24
EN

Stack Overflow用户

发布于 2017-06-07 17:08:38

我编写了一个函数来在angular-ui-tree组件中显示JSON数据。

关键点如下:

在解析例程中,将当前节点的“JSON字符串”保存在节点本身中,每个“未解析”节点都有这个有效负载和一个“load”函数。

代码语言:javascript
复制
function parse(name, value) {

  var node = {
    name: name
  };

  if (Array.isArray(value)) {
    node.isEmpty = value.length === 0;
    node.payload = value;
    node.props = [];
    node.load = function(node) {
      for (var i = 0; i < node.payload.length; i++) {
        node.props.push(parse(node.name + '[' + i + ']', node.payload[i]));
      }
      delete node.isEmpty;
      delete node.payload;
    }
  } else if (value !== undefined && value !== null && typeof value === 'object') {
    node.isEmpty = Object.keys(value).length === 0;
    node.payload = value;
    node.props = [];
    node.load = function(node) {
      var keys = Object.keys(node.payload);
      for (var i = 0; i < keys.length; i++) {
        node.props.push(parse(node.name + '.' + keys[i], node.payload[keys[i]]));
      }
      delete node.isEmpty;
      delete node.payload;
    }
  } else {
    node.value = value;
  }

  return node;
}

然后,当用户单击切换按钮时,您可以调用此函数来解析树中的下一个节点,并将数据绑定到HTML。

可以通过一个示例更清楚地说明:https://jsfiddle.net/MatteoTosato/ghm4z606/

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22168343

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档