javascript - 使用无序数组的分层树

Question

我有一个无序数组。 id 是唯一值。parent 是父级的id。我需要一个分层 JSON。

var C=[
        {
        "id": 57,
        "name": "Breaded Chicken Items",
        "slug": "breaded-chicken-items",
        "parent": 55,
        "description": "",
        "display": "default",
        "image": "http://coitor.com/emke/wp-content/uploads/2016/05/mainbanner-2.jpg",
        "count": 0
        },
        {
        "id": 70,
        "name": "Curry Masala Blends",
        "slug": "curry-masala-blends",
        "parent": 69,
        "description": "",
        "display": "default",
        "image": "http://coitor.com/emke/wp-content/uploads/2016/04/purto-probatus.jpg",
        "count": 0
        },
        {
        "id": 55,
        "name": "Fish | Meat | Frozen Veg",
        "slug": "fish-meat-frozen-veg",
        "parent": 0,
        "description": "",
        "display": "default",
        "image": "http://coitor.com/emke/wp-content/uploads/2016/05/mainbanner-2.jpg",
        "count": 0
        },
        {
        "id": 186,
        "name": "Frozen Veg",
        "slug": "frozen-veg",
        "parent": 55,
        "description": "",
        "display": "default",
        "image": "http://coitor.com/emke/wp-content/uploads/2016/05/mainbanner-1.jpg",
        "count": 0
        },
        {
        "id": 69,
        "name": "Spices | Curry Powders",
        "slug": "spices-curry-powders",
        "parent": 0,
        "description": "",
        "display": "default",
        "image": "http://coitor.com/emke/wp-content/uploads/2016/04/rsz_birds_eye_chilli.jpg",
        "count": 0
        },
        {
        "id": 47,
        "name": "Vegetables",
        "slug": "vegetables",
        "parent": 0,
        "description": "",
        "display": "subcategories",
        "image": "http://coitor.com/emke/wp-content/uploads/2016/04/wisi-antiopam.jpg",
        "count": 15
        },
        {
        "id": 72,
        "name": "Whole Spices",
        "slug": "whole-spices",
        "parent": 69,
        "description": "",
        "display": "default",
        "image": "http://coitor.com/emke/wp-content/uploads/2016/04/fresh-greenpeas.jpg",
        "count": 0
        }
        ]

喜欢这个输出

  [{
    "id": 55,
    "name": "Fish | Meat | Frozen Veg",
    "slug": "fish-meat-frozen-veg",
    "parent": 0,
    "description": "",
    "display": "default",
    "image": "http://coitor.com/emke/wp-content/uploads/2016/05/mainbanner-2.jpg",
    "count": 0
    "Children":[
         {
            "id": 57,
            "name": "Breaded Chicken Items",
            "slug": "breaded-chicken-items",
            "parent": 55,
            "description": "",
            "display": "default",
            "image": "http://coitor.com/emke/wp-content/uploads/2016/05/mainbanner-2.jpg",
            "count": 0
         }
     ]
   }]..etc

我不知道。

Answer 1

您可以通过使用 id 和 parent 的信息来使用单循环方法来生成对象中的节点。

如果找到没有父节点的节点，则该节点是根节点并添加到结果数组中。

var data = [{ id: 57, name: "Breaded Chicken Items", slug: "breaded-chicken-items", parent: 55, description: "", display: "default", image: "http://coitor.com/emke/wp-content/uploads/2016/05/mainbanner-2.jpg", count: 0 }, { id: 70, name: "Curry Masala Blends", slug: "curry-masala-blends", parent: 69, description: "", display: "default", image: "http://coitor.com/emke/wp-content/uploads/2016/04/purto-probatus.jpg", count: 0 }, { id: 55, name: "Fish | Meat | Frozen Veg", slug: "fish-meat-frozen-veg", parent: 0, description: "", display: "default", image: "http://coitor.com/emke/wp-content/uploads/2016/05/mainbanner-2.jpg", count: 0 }, { id: 186, name: "Frozen Veg", slug: "frozen-veg", parent: 55, description: "", display: "default", image: "http://coitor.com/emke/wp-content/uploads/2016/05/mainbanner-1.jpg", count: 0 }, { id: 69, name: "Spices | Curry Powders", slug: "spices-curry-powders", parent: 0, description: "", display: "default", image: "http://coitor.com/emke/wp-content/uploads/2016/04/rsz_birds_eye_chilli.jpg", count: 0 }, { id: 47, name: "Vegetables", slug: "vegetables", parent: 0, description: "", display: "subcategories", image: "http://coitor.com/emke/wp-content/uploads/2016/04/wisi-antiopam.jpg", count: 15 }, { id: 72, name: "Whole Spices", slug: "whole-spices", parent: 69, description: "", display: "default", image: "http://coitor.com/emke/wp-content/uploads/2016/04/fresh-greenpeas.jpg", count: 0 }],
    tree = function (data, root) {
        var r = [], o = {};
        data.forEach(function (a) {
            a.children = o[a.id] && o[a.id].children;
            o[a.id] = a;
            if (a.parent === root) {
                r.push(a);
                return;
            }
            o[a.parent] = o[a.parent] || {};
            o[a.parent].children = o[a.parent].children || [];
            o[a.parent].children.push(a);
        });
        return r;
    }(data, 0);

console.log(tree);

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