如何像http://jsonviewer.stack.hu/使用angular JS那样以树状的方式呈现JSON?
发布于 2014-08-05 01:19:50
发布于 2017-06-07 17:08:38
我编写了一个函数来在angular-ui-tree组件中显示JSON数据。
关键点如下:
在解析例程中,将当前节点的“JSON字符串”保存在节点本身中,每个“未解析”节点都有这个有效负载和一个“load”函数。
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/
https://stackoverflow.com/questions/22168343
复制相似问题