将javascript对象转换为HTML
将javascript对象转换为HTML
提问于 2018-06-07 03:35:39
所以我需要一个函数来转换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
回答 2
Stack Overflow用户
回答已采纳
发布于 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))
Stack Overflow用户
发布于 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)));
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50728240
复制相关文章
相似问题