使用 Javascript 推送嵌套数组注释

Question

我得到一个这样的数组用于来自服务器的评论：

var comments = [{
    id: 1,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: []
}, {
    id: 2,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: []
}, {
    id: 3,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: [1]
}, {
    id: 4,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: [1]
}, {
    id: 5,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: [1, 3]
}, {
    id: 6,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: []
}];

每个对象的父数组是其父对象及以上对象的地址。所以我想将每个评论推送到新回复数组项中的更正父项。我用这种方式对评论进行了排序：

var sort = function(a, b) {
    if (a.pasokh.length < b.pasokh.length) {
        return 1;
    }
    if (a.pasokh.length > b.pasokh.length) {
        return -1;
    }
    // a must be equal to b
    return 0;
};

comments.sort(sort);

然后得到这样的数组：

[{
    id: 5,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: [1, 3]
}, {
    id: 3,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: [1]
}, {
    id: 4,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: [1]
}, {
    id: 1,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: []
}, {
    id: 2,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: []
}, {
    id: 6,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: []
}]

评论的顺序可能不像上面那样完全正确。将 id:5 推送到 id:3 和 id:3 & id:4toid:1` 并获得这样的数组的最佳方法是什么：

[{
    id: 1,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: [],
    reply: [{
        id: 3,
        text: 'Lorem ipsum dolor sit amet... ',
        parent: [1],
        reply: [{
            id: 5,
            text: 'Lorem ipsum dolor sit amet... ',
            parent: [1, 3]
        }, ]
    }, {
        id: 4,
        text: 'Lorem ipsum dolor sit amet... ',
        parent: [1]
    }, ]
}, {
    id: 2,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: []
}, {
    id: 6,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: []
}]

Answer 1

您可以尝试这样的操作：

逻辑：

使用父元素的最小长度对数组进行排序。
然后遍历.parent并递归搜索必要的对象。超过1位家长，设置searchNode为前一位家长的回复。
循环结束后，将当前对象推入其中。

var comments=[{id:1,text:"Lorem ipsum dolor sit amet... ",parent:[]},{id:2,text:"Lorem ipsum dolor sit amet... ",parent:[]},{id:3,text:"Lorem ipsum dolor sit amet... ",parent:[1]},{id:4,text:"Lorem ipsum dolor sit amet... ",parent:[1]},{id:5,text:"Lorem ipsum dolor sit amet... ",parent:[1,3]},{id:6,text:"Lorem ipsum dolor sit amet... ",parent:[]}];

var r = [];
comments.sort(function(a, b) {
  return a.parent.length - b.parent.length
}).forEach(function(o) {
  if (o.parent.length > 0) {
    var lastNode = comments;
    o.parent.forEach(function(n) {
      if (!Array.isArray(lastNode)) lastNode = lastNode.reply
      lastNode = lastNode.find(x => x.id === n)
    });
    if (lastNode) {
      lastNode.reply = lastNode.reply || [];
      lastNode.reply.push(o)
    }
  } else {
    o.reply = [];
    r.push(o);
  }
});

console.log(r)

Answer 2

此提议适用于未排序的数据。它以 id 作为参考，甚至将未知的 id 对象应用到临时对象，稍后用给定的数据填充它。这意味着这个解决方案只需要一个循环。

var comments = [{ id: 1, text: 'Lorem ipsum dolor sit amet... ', parent: [] }, { id: 2, text: 'Lorem ipsum dolor sit amet... ', parent: [] }, { id: 3, text: 'Lorem ipsum dolor sit amet... ', parent: [1] }, { id: 4, text: 'Lorem ipsum dolor sit amet... ', parent: [1] }, { id: 5, text: 'Lorem ipsum dolor sit amet... ', parent: [1, 3] }, { id: 6, text: 'Lorem ipsum dolor sit amet... ', parent: [] }],
    tree = function (array) {
        var r = [],
            o = Object.create(null);

        array.forEach(function (a) {
            var id;
            a.reply = o[a.id] && o[a.id].reply;
            o[a.id] = a;
            id = a.parent.reduce(function (r, a) {
                r !== null && !(a in o) && o[r].reply.push(o[a] = {});
                return a;
            }, null);
            if (id !== null) {
                o[id].reply = o[id].reply || [];
                o[id].reply.push(a);
            } else {
                r.push(o[a.id]);
            }
        });
        return r;
    }(comments);

console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }

使用 Javascript 推送嵌套数组注释

push nested array comments with Javascript

javascript

arrays

comments

push

逻辑：