0

Есть некий массив с данными.
Мне нужно.
Отфильтровать все данные 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'
    },
];

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.