所以我需要一个函数来转换js对象的类型:
{node: 'X', children: [{node: 'Y'}]}
将任何深度转换为类似于html的字符串。例如,上述代码应转换为类似以下内容:
'<div class="X"><div class="Y"></div></div>'
这应该是直观的,因为顺序节点插入到彼此中的顺序是相同的div。所以这就是我目前所知道的:
function convertObj(obj){
const html_start = '<div class="';
const html_end = '</div>';
let current_parent = obj;
let child_nodes = '';
console.log(current_parent, current_parent.children)
if( typeof( current_parent.children)!= 'undefined'){
let childrn = current_parent.children.map(child_node => convertObj(child_node) )
child_nodes = child_nodes + childrn
}
return html_start+current_parent.node+'">'+child_nodes+html_end;
}
如果子节点的数量是倍数,则问题出在子节点之间的,
。这是我的jest测试,它失败了
describe('convertObj', () => {
it('should turn node value to a div with class of the same name', () => {
expect(convertObj({node: 'A'})).toBe('<div class="A"></div>');
});
it('should incert nodes in children to parent node', () => {
expect(convertObj({node: 'A', children:[{node : 'B'}]})).toBe('<div class="A"><div class="B"></div></div>');
expect(convertObj({node: 'A', children:[{node : 'B'}, {node: 'C', children: [{node: 'D'}]}]})).toBe('<div class="A"><div class="B"></div> <div class="C"><div class="D"></div></div></div>');
});
});
感谢您的帮助!您可以运行测试here
发布于 2018-06-07 03:41:01
使用更多的ES6语法糖,如object destructuring和template literal,您可以进行非常简单的递归实现:
const convertObj = ({ node, children = [] }) =>
`<div class="${node}">${children.map(convertObj).join(' ')}</div>`
const tree = {node: 'A', children:[{node : 'B'}, {node: 'C', children: [{node: 'D'}]}]}
console.log(convertObj(tree))
发布于 2018-06-07 03:49:07
该问题是由于连接child_nodes
(字符串)和childrn
(数组)时隐式调用.join()
造成的。
只需添加一个以空格为分隔符的显式.join()
,您的函数就会按预期工作
function convertObj(obj){
const html_start = '<div class="';
const html_end = '</div>';
let current_parent = obj;
let child_nodes = '';
if( typeof( current_parent.children)!= 'undefined'){
let childrn = current_parent.children.map(child_node => convertObj(child_node) )
child_nodes = child_nodes + childrn.join(" ");
}
return html_start+current_parent.node+'">'+child_nodes+html_end;
}
[{node: 'A', children:[{node : 'B'}]}, {node: 'A', children:[{node : 'B'}, {node: 'C', children: [{node: 'D'}]}]}]
.forEach(test => console.log(convertObj(test)));
https://stackoverflow.com/questions/50728240
复制相似问题