javascript - 将 javascript 对象转换为 HTML

Question

所以我需要一个转换类型为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;
}

问题是子节点之间的 , 如果它们的数量是多个的话。 这是我的笑话测试，它失败了

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

Answer 1

使用更多 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))