Как построить дерево из Javascript массива?

122

13 марта 2021, 11:50

Есть некий массив с данными.
Мне нужно.
Отфильтровать все данные type === 'comment'
Далее создать правильную структуру этих комментариев.
Далее добавляем все дочерние элементы.

var data = [
    {
        inner:
            {
                id: 1, parent: null, comment: "ttttttt"
            },
        timestamp: 12312312312,
        type: 'comment'
    },
    {
        inner: null, timestamp: 12312312312, type: "event"
    },
    {
        inner: null, timestamp: 12312312312, type: "event"
    },
    {
        inner: null, timestamp: 12312312312, type: "event"
    },
    {
        inner:
            {
                id: 5, parent: 1, comment: "ttttttt"
            },
        timestamp: 12312312312,
        type: 'comment'
    },
    {
        inner:
            {
                id: 6, parent: 8, comment: "ttttttt"
            },
        timestamp: 12312312312,
        type: 'comment'
    },
    {
        inner:
            {
                id: 8, parent: null, comment: "ttttttt"
            },
        timestamp: 12312312312,
        type: 'comment'
    },
];

Answer 1

Решение. Построения дерева.
Источник библиотеки

var data = [ 
    { 
        inner: 
            { 
                id: 1, parent: null, comment: "ttttttt-1" 
            }, 
        timestamp: 12312312312, 
        type: 'comment' 
    }, 
    { 
        inner: null, timestamp: 12312312312, type: "event" 
    }, 
    { 
        inner: null, timestamp: 12312312312, type: "event" 
    }, 
    { 
        inner: null, timestamp: 12312312312, type: "event" 
    }, 
    { 
        inner: 
            { 
                id: 5, parent: 1, comment: "ttttttt-5" 
            }, 
        timestamp: 12312312312, 
        type: 'comment' 
    }, 
    { 
        inner: 
            { 
                id: 6, parent: 8, comment: "ttttttt-6" 
            }, 
        timestamp: 12312312316, 
        type: 'comment' 
    }, 
    { 
        inner: 
            { 
                id: 8, parent: null, comment: "ttttttt-8" 
            }, 
        timestamp: 12312312312, 
        type: 'comment' 
    }, 
]; 
 
var _queryTreeSort = function (options) { 
    var cfi, e, i, id, o, pid, rfi, ri, thisid, _i, _j, _len, _len1, _ref, _ref1; 
    id = options.id || "id"; 
    pid = options.parentid || "parentid"; 
    ri = []; 
    rfi = {}; 
    cfi = {}; 
    o = []; 
    _ref = options.q; 
    for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) { 
        e = _ref[i]; 
        rfi[e[id]] = i; 
        if (cfi[e[pid]] == null) { 
            cfi[e[pid]] = []; 
        } 
        cfi[e[pid]].push(options.q[i][id]); 
    } 
    _ref1 = options.q; 
    for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) { 
        e = _ref1[_j]; 
        if (rfi[e[pid]] == null) { 
            ri.push(e[id]); 
        } 
    } 
    while (ri.length) { 
        thisid = ri.splice(0, 1); 
        o.push(options.q[rfi[thisid]]); 
        if (cfi[thisid] != null) { 
            ri = cfi[thisid].concat(ri); 
        } 
    } 
    return o; 
}; 
var _makeTree = function (options) { 
    var children, e, id, o, pid, temp, _i, _len, _ref; 
    id = options.id || "id"; 
    pid = options.parentid || "parentid"; 
    children = options.children || "children"; 
    temp = {}; 
    o = []; 
    _ref = options.q; 
    for (_i = 0, _len = _ref.length; _i < _len; _i++) { 
        e = _ref[_i]; 
        e[children] = []; 
        temp[e[id]] = e; 
        if (temp[e[pid]] != null) { 
            temp[e[pid]][children].push(e); 
        } else { 
            o.push(e); 
        } 
    } 
    return o; 
}; 
 
 
var arr = []; 
data.forEach(function (obj) { 
    if (obj.type === 'comment') { 
        let nc = { 
            id: obj.inner.id, 
            parentid: obj.inner.parent, 
            comment: obj.inner.comment, 
            timestamp: obj.timestamp, 
        }; 
        arr.push(nc); 
    } 
}); 
 
arr = _queryTreeSort({q: arr}); 
arr = _makeTree({q: arr}); 
 
// Для постройки дерева (настройки можно внести сюда) 
var _renderTree = function(tree) { 
  var e, html, _i, _len; 
  html = "<ul>"; 
  for (_i = 0, _len = tree.length; _i < _len; _i++) { 
    e = tree[_i]; 
    html += "<li>" + e.comment; 
    if (e.children != null) { 
      html += _renderTree(e.children); 
    } 
    html += "</li>"; 
  } 
  html += "</ul>"; 
  return html; 
}; 
 
 
// Вывод 
document.getElementById("app").innerHTML = _renderTree(arr); 
console.log(_renderTree(arr));

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
</head> 
<body> 
<div id="app"></div> 
</body> 
</html>