Generate a tree for MLM

How to generate a tree for MLM ( Multi-Level Marketing ) in JavaScript for either JSON / XML data

by Good Muyis

HTML

<div id="mainContainer" class="clearfix"></div>

CSS

#mainContainer {
  background: Red;
  min-width: 450px;
}

.container {
  text-align: center;
  margin: 10px .5%;
  padding: 10px .5%;
  background: green;
  float: left;
  overflow: visible;
  position: relative;
}


.member {
  background: #eee;
  position: relative;
  z-index: 1;
  cursor: default;
  border-bottom: solid 5px red;
}

.member:after {
  display: block;
  position: absolute;
  left: 50%;
  width: 5px;
  height: 20px;
  background: red;
  content: " ";
  bottom: 100%;
}

.member:hover {
  z-index: 2;
}

.member .metaInfo {
  display: none;
  border: solid 1px #000;
  background: #fff;
  position: absolute;
  bottom: 100%;
  left: 50%;
  padding: 5px;
  width: 100px;
}

.member:hover .metaInfo {
  display: block;
}

.member .metaInfo img {
  width: 50px;
  height: 50px;
  display: inline-block;
  padding: 5px;
  margin-right: 5px;
  vertical-align: top;
  border: solid 1px #aaa;
}

JavaScript

var members = [
/*    {memberId : 1, parentId:null, amount:200, otherInfo:"blah"},
    {memberId : 2, parentId:1, amount:300, otherInfo:"blah1"},
    {memberId : 3, parentId:1, amount:400, otherInfo:"blah2"},
     {memberId : 4, parentId:3, amount:500, otherInfo:"blah3"},
    {memberId : 6, parentId:2, amount:600, otherInfo:"blah4"},
    {memberId : 9, parentId:4, amount:700, otherInfo:"blah5"},
    {memberId : 12, parentId:2, amount:800, otherInfo:"blah6"},
    {memberId : 5, parentId:2, amount:900, otherInfo:"blah7"},
    {memberId : 13, parentId:2, amount:0, otherInfo:"blah8"},
    {memberId : 14, parentId:2, amount:800, otherInfo:"blah9"},
    {memberId : 55, parentId:1, amount:250, otherInfo:"blah10"},
    {memberId : 56, parentId:33, amount:10, otherInfo:"blah11"},
    {memberId : 57, parentId:3, amount:990, otherInfo:"blah12"},
    {memberId : 58, parentId:3, amount:400, otherInfo:"blah13"},
    {memberId : 59, parentId:33, amount:123, otherInfo:"blah14"},
    {memberId : 54, parentId:6, amount:321, otherInfo:"blah15"},
    {memberId : 53, parentId:56, amount:10000, otherInfo:"blah7"},
    {memberId : 52, parentId:2, amount:47, otherInfo:"blah17"},
    {memberId : 51, parentId:6, amount:534, otherInfo:"blah18"},
    {memberId : 50, parentId:9, amount:55943, otherInfo:"blah19"},
    {memberId : 22, parentId:9, amount:2, otherInfo:"blah27"},
    {memberId : 33, parentId:12, amount:-10, otherInfo:"blah677"}, */
{"memberId":40,"parentId":null,"name":"Abubakar Muyiwa","token":"MSA49F2D"},
{"memberId":49,"parentId":40,"name":"Suleimen","token":"MSA18206"},
{"memberId":48,"parentId":47,"name":"Second User","token":"MSAD469B"},
{"memberId":47,"parentId":40,"name":"Samuel Ola","token":"MSA26C13"}
    
];
var testImgSrc = "https://static.thenounproject.com/png/561473-200.png";
(function heya( parentId ){
    // This is slow and iterates over each object everytime.
    // Removing each item from the array before re-iterating 
    // may be faster for large datasets.
...