How to tree a array as hierarchy without to know the level limit [duplicate]

javascript flatten

Given this tree, is there an easy way to convert it to a flat array with the following conditions?

  1. JS ES5, jQuery used too
  2. respecting the order of presentation
  3. add a "level" property that shows the level of indentation, starting from 0
[
 {
  "root": "0",
  "id": "1",
  "name": "Frutta",
  "status": "1",
  "position": "1",
  "children": [
   {
    "root": "1",
    "id": "4",
    "name": "Agrumi",
    "status": "1",
    "position": "3",
    "children": []
   },
   {
    "root": "1",
    "id": "5",
    "name": "Pere",
    "status": "1",
    "position": "4",
    "children": []
   }
  ]
 },
 {
  "root": "0",
  "id": "2",
  "name": "Ortaggi",
  "status": "1",
  "position": "1",
  "children": [
   {
    "root": "2",
    "id": "7",
    "name": "Da foglia",
    "status": "1",
    "position": "6",
    "children": [
     {
      "root": "7",
      "id": "9",
      "name": "Insalate",
      "status": "1",
      "position": "1",
      "children": []
     }
    ]
   },
   {
    "root": "2",
    "id": "8",
    "name": "Da fiore",
    "status": "1",
    "position": "7",
    "children": []
   },
   {
    "root": "2",
    "id": "21",
    "name": "Da frutto",
    "status": "1",
    "position": "16",
    "children": []
   },
   {
    "root": "2",
    "id": "22",
    "name": "Da radici",
    "status": "1",
    "position": "17",
    "children": []
   },
   {
    "root": "2",
    "id": "23",
    "name": "Da fusto",
    "status": "1",
    "position": "8",
    "children": []
   },
   {
    "root": "2",
    "id": "24",
    "name": "Da bulbi",
    "status": "1",
    "position": "18",
    "children": []
   }
  ]
 },
 {
  "root": "0",
  "id": "15",
  "name": "Colori",
  "status": "1",
  "position": "14",
  "children": [
   {
    "root": "15",
    "id": "3",
    "name": "Banane",
    "status": "1",
    "position": "2",
    "children": [
     {
      "root": "3",
      "id": "6",
      "name": "Mele",
      "status": "1",
      "position": "5",
      "children": []
     }
    ]
   },
   {
    "root": "15",
    "id": "16",
    "name": "Blu/Viola",
    "status": "1",
    "position": "10",
    "children": []
   },
   {
    "root": "15",
    "id": "17",
    "name": "Verde",
    "status": "1",
    "position": "11",
    "children": []
   },
   {
    "root": "15",
    "id": "18",
    "name": "Bianco",
    "status": "1",
    "position": "12",
    "children": []
   },
   {
    "root": "15",
    "id": "19",
    "name": "Giallo/Arancio",
    "status": "1",
    "position": "13",
    "children": []
   },
   {
    "root": "15",
    "id": "20",
    "name": "Rosso",
    "status": "1",
    "position": "14",
    "children": []
   }
  ]
 },
 {
  "root": "0",
  "id": "25",
  "name": "Persone",
  "status": "1",
  "position": "24",
  "children": [
   {
    "root": "25",
    "id": "26",
    "name": "Fabrizio",
    "status": "1",
    "position": "2",
    "children": [
     {
      "root": "26",
      "id": "27",
      "name": "Uomo",
      "status": "1",
      "position": "21",
      "children": []
     }
    ]
   },
   {
    "root": "25",
    "id": "28",
    "name": "Ivan",
    "status": "1",
    "position": "1",
    "children": []
   }
  ]
 },
 {
  "root": "0",
  "id": "29",
  "name": "Category",
  "status": "1",
  "position": "25",
  "children": []
 }
]

The result expected should be this:

[
 {
  "root": "0",
  "id": "1",
  "name": "Frutta",
  "status": "1",
  "position": "1"
  "level": 0
 },
 {
  "root": "1",
  "id": "4",
  "name": "Agrumi",
  "status": "1",
  "position": "3",
  "level": 1
 },
 {
  "root": "1",
  "id": "5",
  "name": "Pere",
  "status": "1",
  "position": "4",
  "level": 1
 },
 {
  "root": "0",
  "id": "2",
  "name": "Ortaggi",
  "status": "1",
  "position": "1",
  "level": 0
 },
 {
  "root": "2",
  "id": "7",
  "name": "Da foglia",
  "status": "1",
  "position": "6",
  "level": 1
 },
 {
  "root": "7",
  "id": "9",
  "name": "Insalate",
  "status": "1",
  "position": "1",
  "level": 2
 },
...


I found this function, but has some disadvantages:

var flattenTree = function(treeObj, idAttr, parentAttr, childrenAttr, levelAttr) {
    if (!idAttr) idAttr = 'id';
    if (!parentAttr) parentAttr = 'root';
    if (!childrenAttr) childrenAttr = 'children';
    if (!levelAttr) levelAttr = 'level';

    function flattenChild(childObj, parentId, level) {
        var array = []; 

        var childCopy = $.extend({}, childObj);
        childCopy[levelAttr] = level;
        childCopy[parentAttr] = parentId || "0";
        delete childCopy[childrenAttr];
        array.push(childCopy);

        array = array.concat(processChildren(childObj, level));

        return array;
    };

    function processChildren(obj, level) {
        if (!level) level = 0;
        var array = [];

        obj[childrenAttr].forEach(function(childObj) {
            array = array.concat(flattenChild(childObj, obj[idAttr], level+1));
        });

        return array;
    };

    var result = processChildren(treeObj);
    return result;
};
  1. I should build first another array starting with "children" as root
[
 "children": <my original array here>
]
  1. the levels start from 1, not 0 (I tried putting level = -1 with no luck)

Here is a working fiddle: https://jsfiddle.net/yLke452z/

Thank you


Solution 1:

You could take a recursive method for Array#flatMap and store the level for the next call.

const
    flatTree = (level = 0) => ({ children = [], ...object }) => [
        { ...object, level }, ...children.flatMap(flatTree(level + 1))
    ];

var tree = [{ root: "0", id: "1", name: "Frutta", status: "1", position: "1", children: [{ root: "1", id: "4", name: "Agrumi", status: "1", position: "3", children: [] }, { root: "1", id: "5", name: "Pere", status: "1", position: "4", children: [] }] }, { root: "0", id: "2", name: "Ortaggi", status: "1", position: "1", children: [{ root: "2", id: "7", name: "Da foglia", status: "1", position: "6", children: [{ root: "7", id: "9", name: "Insalate", status: "1", position: "1", children: [] }] }, { root: "2", id: "8", name: "Da fiore", status: "1", position: "7", children: [] }, { root: "2", id: "21", name: "Da frutto", status: "1", position: "16", children: [] }, { root: "2", id: "22", name: "Da radici", status: "1", position: "17", children: [] }, { root: "2", id: "23", name: "Da fusto", status: "1", position: "8", children: [] }, { root: "2", id: "24", name: "Da bulbi", status: "1", position: "18", children: [] }] }, { root: "0", id: "15", name: "Colori", status: "1", position: "14", children: [{ root: "15", id: "3", name: "Banane", status: "1", position: "2", children: [{ root: "3", id: "6", name: "Mele", status: "1", position: "5", children: [] }] }, { root: "15", id: "16", name: "Blu/Viola", status: "1", position: "10", children: [] }, { root: "15", id: "17", name: "Verde", status: "1", position: "11", children: [] }, { root: "15", id: "18", name: "Bianco", status: "1", position: "12", children: [] }, { root: "15", id: "19", name: "Giallo/Arancio", status: "1", position: "13", children: [] }, { root: "15", id: "20", name: "Rosso", status: "1", position: "14", children: [] }] }, { root: "0", id: "25", name: "Persone", status: "1", position: "24", children: [{ root: "25", id: "26", name: "Fabrizio", status: "1", position: "2", children: [{ root: "26", id: "27", name: "Uomo", status: "1", position: "21", children: [] }] }, { root: "25", id: "28", name: "Ivan", status: "1", position: "1", children: [] }] }, { root: "0", id: "29", name: "Category", status: "1", position: "25", children: [] }],
    flat = tree.flatMap(flatTree());

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

ES5 with Array#reduce.

function flatTree(level) {
    return function(result, object) {
        var children = object.children || [],
            item = Object.keys(object).reduce(function (o, k) {
                if (k !== 'children') o[k] = object[k];
                return o;
            }, {});

        level = level || 0;
        item.level = level;
        return result.concat(item, children.reduce(flatTree(level + 1), []));
    };
}

var tree = [{ root: "0", id: "1", name: "Frutta", status: "1", position: "1", children: [{ root: "1", id: "4", name: "Agrumi", status: "1", position: "3", children: [] }, { root: "1", id: "5", name: "Pere", status: "1", position: "4", children: [] }] }, { root: "0", id: "2", name: "Ortaggi", status: "1", position: "1", children: [{ root: "2", id: "7", name: "Da foglia", status: "1", position: "6", children: [{ root: "7", id: "9", name: "Insalate", status: "1", position: "1", children: [] }] }, { root: "2", id: "8", name: "Da fiore", status: "1", position: "7", children: [] }, { root: "2", id: "21", name: "Da frutto", status: "1", position: "16", children: [] }, { root: "2", id: "22", name: "Da radici", status: "1", position: "17", children: [] }, { root: "2", id: "23", name: "Da fusto", status: "1", position: "8", children: [] }, { root: "2", id: "24", name: "Da bulbi", status: "1", position: "18", children: [] }] }, { root: "0", id: "15", name: "Colori", status: "1", position: "14", children: [{ root: "15", id: "3", name: "Banane", status: "1", position: "2", children: [{ root: "3", id: "6", name: "Mele", status: "1", position: "5", children: [] }] }, { root: "15", id: "16", name: "Blu/Viola", status: "1", position: "10", children: [] }, { root: "15", id: "17", name: "Verde", status: "1", position: "11", children: [] }, { root: "15", id: "18", name: "Bianco", status: "1", position: "12", children: [] }, { root: "15", id: "19", name: "Giallo/Arancio", status: "1", position: "13", children: [] }, { root: "15", id: "20", name: "Rosso", status: "1", position: "14", children: [] }] }, { root: "0", id: "25", name: "Persone", status: "1", position: "24", children: [{ root: "25", id: "26", name: "Fabrizio", status: "1", position: "2", children: [{ root: "26", id: "27", name: "Uomo", status: "1", position: "21", children: [] }] }, { root: "25", id: "28", name: "Ivan", status: "1", position: "1", children: [] }] }, { root: "0", id: "29", name: "Category", status: "1", position: "25", children: [] }],
    flat = tree.reduce(flatTree(), []);

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

Related

alpine package py-pip missing
Prisma, select row from table 1, depending on the latest foreign key in table 2
Device keyboard covers fragment content if BottomNavigationView is hide
"e.target" calling wrong target?
does DDS support communication across a Cut Vertex?
FOSRestBundle routes versioning
MySQL Subquery making query super slow
Using an Array notation for object construction in Javascript [duplicate]
Hiding url path in angular
How to use p:schedule correctly?
Understanding `memory_order_acquire` and `memory_order_release` in C++11
Ruby reduce all whitespace to single spaces