json数据解析渲染问题

Question

var data = [{
              title: '经济',
              category: [{
                   title: '第一产业',
                   category: [{
                        title: '农业',
                     }, {
                         title: '渔',
                     }]
                     },
                     {
                     title: '第二产业',
                     category: [{
                         title: '煤矿业',
                          }, {
                          title: '制造业'
                          }]
                        }
                    ]
                }, {
                    title: '文化',
                    category: [{
                            title: '历史',
                            category: []
                        },
                        {
                            title: '美食',
                            category: []
                        }
                    ]
                }]

渲染为：

1.经济
  2.第一产业
    3.渔业
    3.农业
  2.第二产业
    3.煤矿
1.文化
  2.历史
  2.美食  

Answer 1

如果纯JS实现的话 递归创建节点就行了吧。
如果用Vue之类的框架，那就更简单了。

---

简单写了下，还是贴出来吧。

function renderTree (list, parent, level = 0) {
  parent = parent || document.createElement('div')
    list.forEach((item, idx) => {
    let node = document.createElement('div')
    node.innerText = `${idx + 1}. ${ item.title }`
    node.style.marginLeft = level * 20 + 'px'
    parent.appendChild(node)
    item.category && item.category.length && renderTree(item.category, node, level + 1)
  })
  return parent
}

Answer 2

https://jsfiddle.net/wscats/k...

Answer 3

不知道目标是啥。简单用层序遍历

function travel(node) {
    if(!node)return []
    var queue = [[node, 1]]
    while(queue.length > 0) {

        var [tnode, dep] = queue.shift()
        console.log(' '.repeat(dep * 2) + dep + '.'+ tnode.title)

        if(tnode.category && tnode.category.length > 0) {
            tnode.category.reverse().forEach(item => queue.unshift([item, dep+1]))
        }

    }
    return node
}

for(let d of data) {
    travel(d)
}

Answer 4

相同问题有答案了