Creating dynamic children of a JSON object from data source

Question

I'm creating a plugin using this library to create an organizational chart for my application (built on bubble.io) that gets the data from the application and wants that data to get inside the structure i.e parent children dynamically. The number of children of any node can be dynamic and needs to be entered through a loop and recursive function.

I have tried to create a JSON object dynamically but could not succeed in creating a recursive function inside a loop that will keep making children programmatically. I have got the first node from data_source (ibrar) but after that, I have a record of thousand, and a 'children_text' field( can be more than 1 entry) stores a unique ID of the parent. I can also add a parent field if the solution asks for that.

var len = properties.data_source.length();
var i;
var j;
let objj = {};
let hello = [];

let user = properties.data_source.get(0, len);

//extracting string properties from data_source
var name = user[0].get("name_text");
var title = user[0].get("designation_text");
  var image = user[0].get("picture_image");




$(function() {


  var styleTag = $(' <style> .orgchart { background: #fff; }.orgchart td.left, .orgchart td.right, .orgchart td.top { border-color: #aaa; } .orgchart td>.down { background-color: #aaa; } .orgchart .middle-level .title { -color: 699; }.orgchart .middle-level .content { border-color: #006699; }.orgchart .product-dept .title { background-color: #009933; } .orgchart .product-dept .content { border-color: #009933; } .orgchart .rd-dept .title { background-color: #993366; } .orgchart .rd-dept .content { border-color: #993366; } .orgchart .pipeline1 .title { background-color: #996633; } .orgchart .pipeline1 .content { border-color: #996633; } .orgchart .frontend1 .title { background-color: #cc0066; }.orgchart .frontend1 .content { border-color: #cc0066; } .orgchart .second-menu-icon {      transition: opacity .5s;      opacity: 0;      right: -20px;      top: 80px;  transform: rotate(270deg);    z-index: 2;      position: relative;    }    .orgchart .second-menu-icon::before { background-color: rgba(68, 157, 68, 0.5); }    .orgchart .second-menu-icon:hover::before { background-color: #449d44; }    .orgchart .node:hover .second-menu-icon { opacity: 1; }    .orgchart .node .second-menu {      display: none;      position: absolute;      top: 110px;  transform: scaleX(-1)rotate(90deg);    right: -70px;      border-radius: 35px;      box-shadow: 0 0 10px 1px #999;      background-color: #fff;      z-index: 1;    }    .orgchart .node .second-menu .avatar {      width: 60px;      height: 60px;      border-radius: 30px;      float: left;      margin: 5px;   } </style>');
  $('html > head').append(styleTag);

  var datascource = {
    'name': name,
    'title': title,
    'children': [{
        'name': 'Bo Miao',
        'title': 'department manager',
        'className': 'middle-level',
        'children': [{
            'name': 'Li Jing',
            'title': 'senior engineer',
            'className': 'product-dept'
          },
          {
            'name': 'Li Xin',
            'title': 'senior engineer',
            'className': 'product-dept',
            'children': [{
                'name': 'To To',
                'title': 'engineer',
                'className': 'pipeline1'
              },
              {
                'name': 'Fei Fei',
                'title': 'engineer',
                'className': 'pipeline1'
              },
              {
                'name': 'Xuan Xuan',
                'title': 'engineer',
                'className': 'pipeline1'
              }
            ]
          }
        ]
      },
      {
        'name': 'Su Miao',
        'title': 'department manager',
        'className': 'middle-level',
        'children': [{
            'name': 'Pang Pang',
            'title': 'senior engineer',
            'className': 'rd-dept'
          },
          {
            'name': 'Hei Hei',
            'title': 'senior engineer',
            'className': 'rd-dept',
            'children': [{
                'name': 'Xiang Xiang',
                'title': 'UE engineer',
                'className': 'frontend1'
              },
              {
                'name': 'Dan Dan',
                'title': 'engineer',
                'className': 'frontend1'
              },
              {
                'name': 'Zai Zai',
                'title': 'engineer',
                'className': 'frontend1'
              }
            ]
          }
        ]
      }
    ]
  };



  $('#chart-container').orgchart({
    'data': datascource,
    'visibleLevel': 2,
    'nodeContent': 'title',
    'direction': 'l2r',
    'nodeID': 'id',
    'createNode': function($node, data) {
      var secondMenuIcon = $('<i>', {
        'class': 'oci oci-info-circle second-menu-icon',
        click: function() {
          $(this).siblings('.second-menu').toggle();
        }
      });
      var secondMenu = '<div class="second-menu"><img class="avatar" src=' + image + '></div>';
      $node.append(secondMenuIcon).append(secondMenu);
    }
  });
});