Question

我有一个用于多级评论系统的JSON数据，如下所示：

[{
  "thread_id": 2710,
  "parent_id": "",
  "username": "string",
  "comment": "string",
  "postdate": "2017-06-09T07:12:32.000Z",
  "id": 1
}, {
  "thread_id": 2710,
  "parent_id": "1",
  "username": "string2",
  "comment": "string2",
  "postdate": "2017-06-09T07:12:32.000Z",
  "id": 2
}, {
  "thread_id": 2710,
  "parent_id": "",
  "username": "string32",
  "comment": "strin2g2",
  "postdate": "2017-06-09T07:12:32.000Z",
  "id": 3
}, {
  "thread_id": 2710,
  "parent_id": "",
  "username": "str23ing32",
  "comment": "strrgein2g2",
  "postdate": "2017-06-09T07:12:32.000Z",
  "id": 4
}, {
  "thread_id": 2710,
  "parent_id": "3",
  "username": "str2rr3ing32",
  "comment": "strr@gein2g2",
  "postdate": "2017-06-09T07:12:32.000Z",
  "id": 5
}, {
  "thread_id": 2710,
  "parent_id": "3",
  "username": "str2ergergrr3ing32",
  "comment": "strr@geinergerg2g2",
  "postdate": "2017-06-09T07:12:32.000Z",
  "id": 6
}, {
  "thread_id": 2710,
  "parent_id": "6",
  "username": "str2ergrrrgergergrr3ing32",
  "comment": "strr@geiergergernergerg2g2",
  "postdate": "2017-06-09T07:12:32.000Z",
  "id": 7
}]

如何使用javascript构建像底部的响应？

{ id: 1
  parent_id: "",
  ....,
  comments: [
   {
    id: 12,
    parent_id: 1,
    comments: [{ parent_id: 12 ....}]
   }
  ]

Answer 1

您可以使用标准算法构建具有单个循环的树，其中任何id和parent_id节点都已建立并连接。

var data = [{ thread_id: 2710, parent_id: "", username: "string", comment: "string", postdate: "2017-06-09T07:12:32.000Z", id: 1 }, { thread_id: 2710, parent_id: "1", username: "string2", comment: "string2", postdate: "2017-06-09T07:12:32.000Z", id: 2 }, { thread_id: 2710, parent_id: "", username: "string32", comment: "strin2g2", postdate: "2017-06-09T07:12:32.000Z", id: 3 }, { thread_id: 2710, parent_id: "", username: "str23ing32", comment: "strrgein2g2", postdate: "2017-06-09T07:12:32.000Z", id: 4 }, { thread_id: 2710, parent_id: "3", username: "str2rr3ing32", comment: "strr@gein2g2", postdate: "2017-06-09T07:12:32.000Z", id: 5 }, { thread_id: 2710, parent_id: "3", username: "str2ergergrr3ing32", comment: "strr@geinergerg2g2", postdate: "2017-06-09T07:12:32.000Z", id: 6 }, { thread_id: 2710, parent_id: "6", username: "str2ergrrrgergergrr3ing32", comment: "strr@geiergergernergerg2g2", postdate: "2017-06-09T07:12:32.000Z", id: 7 }],
    tree = function (data, root) {
        var r = [],
            o = {};
        data.forEach(function (a) {
            var comments = o[a.id] && o[a.id].comments;
            if (comments) {
                a.comments = comments;
            }
            o[a.id] = a;
            if (a.parent_id === root) {
                r.push(a);
            } else {
                o[a.parent_id] = o[a.parent_id] || {};
                o[a.parent_id].comments = o[a.parent_id].comments || [];
                o[a.parent_id].comments.push(a);
            }
        });
        return r;
    }(data, '');

console.log(tree);

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

为多级评论系统构建JSON数据

1 个答案: