Create recursive tree from json using lodash transform without recursion. Can have unlimited nesting.

recurssive.tree.js

var _ = require('lodash');

var arr = [
    {"name":"my2child1","title":"My 2 Child 1","parent":"my2"},
    {"name":"my2child2","title":"My 2 Child 2","parent":"my2"},
    {"name":"parent","title":"A single parent"},
    {"name":"child-parent","title":"A child parent","parent":"child1"},
    {"name":"my","title":"My"},
    {"name":"my2","title":"My2"},
    {"name":"child1","title":"Child 1","parent":"my"},
    {"name":"child2","title":"Child 2","parent":"my"}
];

var result = _.filter(arr, function(item){
    var parentName = item.parent;
    item.children = this(item.name);
    return !(parentName && this(parentName).push(item));
}, _.memoize(function(){ return []; }));

console.log(JSON.stringify(result, null, 2));

// ==> output
//[
//    {
//        "name": "parent",
//        "title": "A single parent",
//        "children": []
//    },
//    {
//        "name": "my",
//        "title": "My",
//        "children": [
//            {
//                "name": "child1",
//                "title": "Child 1",
//                "parent": "my",
//                "children": [
//                    {
//                        "name": "child-parent",
//                        "title": "A child parent",
//                        "parent": "child1",
//                        "children": []
//                    }
//                ]
//            },
//            {
//                "name": "child2",
//                "title": "Child 2",
//                "parent": "my",
//                "children": []
//            }
//        ]
//    },
//    {
//        "name": "my2",
//        "title": "My2",
//        "children": [
//            {
//                "name": "my2child1",
//                "title": "My 2 Child 1",
//                "parent": "my2",
//                "children": []
//            },
//            {
//                "name": "my2child2",
//                "title": "My 2 Child 2",
//                "parent": "my2",
//                "children": []
//            }
//        ]
//    }
//]

First, you need install loash with below command with npm:

npm i lodash

Second, you must import _ from loash

import _ from "lodash";

Finally, run this function:

export const recursive_lists = (data) => {
  const grouped = _.groupBy(data, (item) => item. parent_id);

  function childrenOf(parent_id) {
    return (grouped[parent_id] || []).map((item) => ({
      id: item.id,
      title: item.title,
      child: childrenOf(item.id),
    }));
  }

  return childrenOf(null);
};

or

First:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

Second:

function recursive_lists(data) {
  const grouped = _.groupBy(data, (item) => item.parent_id);

  function childrenOf(parent_id) {
    return (grouped[parent_id] || []).map((item) => ({
      id: item.id,
      title: item.title,
      child: childrenOf(item.id),
    }));
  }

  return childrenOf(null);
};