Generate TreeView with Json

Navigation
3

I'm generating a TreeView with a Json, the library I'm using is bootstrap-treeview.js.

The structure of the Json that I receive is the following: 

 data = [{
    "Nivel": 0,
    "NombrePuesto": "Coordinador"
    }, {
    "Nivel": 1,
    "NombrePuesto": "Encargado"
    }, {
    "Nivel": 1,
    "NombrePuesto": "Jefe"
    }, {
    "Nivel": 2,
    "NombrePuesto": "Analista 1"
    }, {
    "Nivel": 2,
    "NombrePuesto": "Analista 2"
    }, {
    "Nivel": 1,
    "NombrePuesto": "Jefe de Controles"
    }, {
    "Nivel": 2,
    "NombrePuesto": "Encargado 1"
    }, {
    "Nivel": 1,
    "NombrePuesto": "Jefe de Supervision"
    }, {
    "Nivel": 2,
    "NombrePuesto": "Tecnico 1"
    }, {
    "Nivel": 3,
    "NombrePuesto": "Tecnico 2"
    }, {
    "Nivel": 4,
    "NombrePuesto": "Tecnico 3"
    }];

And I must convert the json, based on the level of the position to: 

 var tree = [{
  text: "Coordinador",
  nodes: [{
      text: "Encargado",

    },
    {
      text: "Jefe",
      nodes: [{
          text: "Analista 1"
        },
        {
          text: "Analista 2"
        }
      ]

    },
    {
      text: "Jefe de Controles",
      nodes: [{
        text: "Encargado 1"
      }]
    },
    {
      text: "Jefe de Supervision",
      nodes: [{
          text: "Tecnico 1"
        },
        {
          text: "Tecnico 2"
        },
        {
          text: "Tecnico 3"
        }
      ]
    }
  ]
}];

I tried to run the Json with a $ .each but I can not generate the correct structure since I always have symbols of more or less. I read that it was possible to go through the Json and push an array depending on the type of level, but I can not do it.

The query generated by the json has the following structure:

If someone can help me thank you very much

This is the example of how it should look, but fill it by hand not with code. 

data = [{
  "Nivel": 0,
  "NombrePuesto": "Coordinador"
}, {
  "Nivel": 1,
  "NombrePuesto": "Encargado"
}, {
  "Nivel": 1,
  "NombrePuesto": "Jefe"
}, {
  "Nivel": 2,
  "NombrePuesto": "Analista 1"
}, {
  "Nivel": 2,
  "NombrePuesto": "Analista 2"
}, {
  "Nivel": 1,
  "NombrePuesto": "Jefe de Controles"
}, {
  "Nivel": 2,
  "NombrePuesto": "Encargado 1"
}, {
  "Nivel": 1,
  "NombrePuesto": "Jefe de Supervision"
}, {
  "Nivel": 2,
  "NombrePuesto": "Tecnico 1"
}, {
  "Nivel": 3,
  "NombrePuesto": "Tecnico 2"
}, {
  "Nivel": 4,
  "NombrePuesto": "Tecnico 3"
}];

var tree = [{
  text: "Coordinador",
  nodes: [{
      text: "Encargado",

    },
    {
      text: "Jefe",
      nodes: [{
          text: "Analista 1"
        },
        {
          text: "Analista 2"
        }
      ]

    },
    {
      text: "Jefe de Controles",
      nodes: [{
        text: "Encargado 1"
      }]
    },
    {
      text: "Jefe de Supervision",
      nodes: [{
          text: "Tecnico 1"
        },
        {
          text: "Tecnico 2"
        },
        {
          text: "Tecnico 3"
        }
      ]
    }
  ]
}];

/*var tree = '';
$.each(data, function(i, item) {
  //console.log(item.Nivel, item.NombrePuesto);
  if (item.Nivel == 0) {
tree += '[{text: "' + item.NombrePuesto + '"';
  }
  if (item.Nivel == 1) {
tree += ', nodes: [{text: "' + item.NombrePuesto + '"}';
  }
  if (item.Nivel >= 2) {
tree += ',{text: "' + item.NombrePuesto + '"}';
  }
});

*/

function cargarTreeView() {
	$.each(data, function(i, item) {
  
  });

  var $TreeV = $('#treeview').treeview({
    data: tree
  });
}

$(document).ready(function() {
  cargarTreeView();
});
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/js/bootstrap-treeview.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/css/bootstrap-treeview.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/css/bootstrap-treeview.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>

<div class="col-sm-4">
  <div id="treeview" class="treeview">
  </div>
</div>
    
asked by raintrooper 05.04.2018 в 01:08
source

2 answers

1

It's nothing short but here is the conversion, using the same example you left.

  

Then you can pass this Object to the loadTreeView function 

var data = [{
  "Nivel": 0,
  "NombrePuesto": "Coordinador"
}, {
  "Nivel": 1,
  "NombrePuesto": "Encargado"
}, {
  "Nivel": 1,
  "NombrePuesto": "Jefe"
}, {
  "Nivel": 2,
  "NombrePuesto": "Analista 1"
}, {
  "Nivel": 2,
  "NombrePuesto": "Analista 2"
}, {
  "Nivel": 1,
  "NombrePuesto": "Jefe de Controles"
}, {
  "Nivel": 2,
  "NombrePuesto": "Encargado 1"
}, {
  "Nivel": 1,
  "NombrePuesto": "Jefe de Supervision"
}, {
  "Nivel": 2,
  "NombrePuesto": "Tecnico 1"
}, {
  "Nivel": 3,
  "NombrePuesto": "Tecnico 2"
}, {
  "Nivel": 4,
  "NombrePuesto": "Tecnico 3"
}];

var lastIndex = 0;
var texto = "[{";
var add1 = "";
var add2 = "";
var search = 0;
var i = 0;
$.each(data, function (i, item) {
  
  if (item.Nivel > lastIndex) {
     search = texto.lastIndexOf('}');
     if (search !== -1 && lastIndex != 0) {
        texto = texto.substr(0, search)+", ";
     }
     texto += '"nodes": [';
     
  } else if (lastIndex > item.Nivel) {
     texto = texto.substr(0, texto.length-2);
     texto += "]";
     for (i = 1; i < lastIndex - item.Nivel; i++) {
       texto += "}]";
     }
     texto += "}";
     texto += ",";
  }
  if (item.Nivel > 0){
  	  add1 = "{";
      add2 = "}";
  }
  texto += add1+'"text": '+'"'+item.NombrePuesto+'"'+add2+', ';
  lastIndex = item.Nivel;
});
texto = texto.substr(0, texto.length-2);
if (lastIndex > 0) {
     texto += "]";
     for (i = 0; i < lastIndex; i++) {
       texto += "}]";
     }
}
//console.log(texto);
var tree = [];
// Puedes luego parsear este a un Object JSON.
try {
   tree = JSON.parse(texto);
}catch (exception) {
   console.log(exception);
}
//console.log(tree);

function cargarTreeView() {    
  var $TreeV = $('#treeview').treeview({
    data: tree
  });
}
$(document).ready(function() {
    cargarTreeView();
   });
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/js/bootstrap-treeview.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/css/bootstrap-treeview.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/css/bootstrap-treeview.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>

<div class="col-sm-4">
  <div id="treeview" class="treeview">
  </div>
</div>
  

PS: Eventually this code can be optimized.

    
answered by 05.04.2018 / 14:28
source
2

I've been giving it a few laps and I managed to generate the treeview : 

data = [{
  "Nivel": 0,
  "NombrePuesto": "Coordinador"
}, {
  "Nivel": 1,
  "NombrePuesto": "Encargado"
}, {
  "Nivel": 1,
  "NombrePuesto": "Jefe"
}, {
  "Nivel": 2,
  "NombrePuesto": "Analista 1"
}, {
  "Nivel": 2,
  "NombrePuesto": "Analista 2"
}, {
  "Nivel": 1,
  "NombrePuesto": "Jefe de Controles"
}, {
  "Nivel": 2,
  "NombrePuesto": "Encargado 1"
}, {
  "Nivel": 1,
  "NombrePuesto": "Jefe de Supervision"
}, {
  "Nivel": 2,
  "NombrePuesto": "Tecnico 1"
}, {
  "Nivel": 3,
  "NombrePuesto": "Tecnico 2"
}, {
  "Nivel": 4,
  "NombrePuesto": "Tecnico 3"
}];

/*var tree = [{
  text: "Coordinador",
  nodes: [{
  text: "Encargado",

},
{
  text: "Jefe",
  nodes: [{
      text: "Analista 1"
    },
    {
      text: "Analista 2"
    }
  ]

},
{
  text: "Jefe de Controles",
  nodes: [{
    text: "Encargado 1"
  }]
},
{
  text: "Jefe de Supervision",
  nodes: [{
      text: "Tecnico 1"
    },
    {
      text: "Tecnico 2"
    },
    {
      text: "Tecnico 3"
    }
  ]
}
  ]
}];*/

var tree = '';
var nodos = 0;
$.each(data, function(i, item) {
  if (item.Nivel == 0) {
tree += '[{"text": "' + item.NombrePuesto + '", "nodes": [';
  nodos=nodos + 1;
  }
  if (item.Nivel == 1) {
   if(data[i+1].Nivel>=2)
   {
   	tree += '{"text": "' + item.NombrePuesto + '", "nodes": [';
nodos=nodos+1;
   }
   else
   {
  tree += '{"text": "' + item.NombrePuesto + '"},';
}	
  }
  if (item.Nivel >= 2) {
  if(i<data.length-1)
  {
 if(data[i+1].Nivel>=2)
 {
    tree += '{"text": "' + item.NombrePuesto + '"},';
  }
  else
  {
    tree += '{"text": "' + item.NombrePuesto + '"}]},';
    nodos=nodos - 1;
  }
}
else
{
    tree += '{"text": "' + item.NombrePuesto + '"}]';
}
  }
});

for (j = 0; j < nodos; j++) {
tree+='}]';
} 



function cargarTreeView() {
$.each(data, function(i, item) {
  
  });

  var $TreeV = $('#treeview').treeview({
data: JSON.parse(tree) 
  });
}

$(document).ready(function() {
  cargarTreeView();
});
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/js/bootstrap-treeview.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/css/bootstrap-treeview.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/css/bootstrap-treeview.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>

<div class="col-sm-4">
  <div id="treeview" class="treeview">
  </div>
</div>

I had to make some changes like quoting text and nodos , see which is the next node to know what to generate and JSON.parse(tree) to convert the generated string to object. You will have to polish it in case there are more use cases (and you can optimize it) but as an initial idea I think it can work for you.

    
answered by 05.04.2018 в 11:04
Listen from a different port SOCKET How can I go to a specific commit and return it master?