使用Javascript

时间:2016-12-09 10:38:46

标签: javascript arrays comments push

我得到一个这样的数组来获取服务器的评论:

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&amp;的最佳方式是什么? id:4 to id: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: []
}]

2 个答案:

答案 0 :(得分:1)

您可以尝试这样的事情:

逻辑:

  • 使用最小父级长度排序数组。
  • 然后循环.parent并递归搜索必要的对象。对于多于1个父级,请将searchNode设置为前一个父级的回复。
  • 循环结束后,将当前对象推入其中。

&#13;
&#13;
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)
&#13;
&#13;
&#13;

答案 1 :(得分:1)

此提案适用于未分类的数据。它以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; }