Generar TreeView con Json

publicado por: Anonymous

Estoy generando un TreeView con un Json, la librería que estoy utilizando es bootstrap-treeview.js.

La estructura del Json que recibo es la siguiente:

 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"
    }];

Y debo convertir el json, en base al nivel del puesto a:

 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"
        }
      ]
    }
  ]
}];

He intentado recorrer el Json con un $.each pero no logro generar la estructura correcta ya que siempre me queda con símbolos de más o de menos. Leí que era posible recorrer el Json y hacer push a un array dependiendo el tipo de nivel, pero no logro hacerlo.

La consulta que genera el json tiene la siguiente estructura:

Sql

Si alguien puede ayudarme muchas gracias.

Este es el ejemplo de como debería quedar, pero lo llene a mano no con código.

_x000D_

_x000D_

data = [{_x000D_
  "Nivel": 0,_x000D_
  "NombrePuesto": "Coordinador"_x000D_
}, {_x000D_
  "Nivel": 1,_x000D_
  "NombrePuesto": "Encargado"_x000D_
}, {_x000D_
  "Nivel": 1,_x000D_
  "NombrePuesto": "Jefe"_x000D_
}, {_x000D_
  "Nivel": 2,_x000D_
  "NombrePuesto": "Analista 1"_x000D_
}, {_x000D_
  "Nivel": 2,_x000D_
  "NombrePuesto": "Analista 2"_x000D_
}, {_x000D_
  "Nivel": 1,_x000D_
  "NombrePuesto": "Jefe de Controles"_x000D_
}, {_x000D_
  "Nivel": 2,_x000D_
  "NombrePuesto": "Encargado 1"_x000D_
}, {_x000D_
  "Nivel": 1,_x000D_
  "NombrePuesto": "Jefe de Supervision"_x000D_
}, {_x000D_
  "Nivel": 2,_x000D_
  "NombrePuesto": "Tecnico 1"_x000D_
}, {_x000D_
  "Nivel": 3,_x000D_
  "NombrePuesto": "Tecnico 2"_x000D_
}, {_x000D_
  "Nivel": 4,_x000D_
  "NombrePuesto": "Tecnico 3"_x000D_
}];_x000D_
_x000D_
var tree = [{_x000D_
  text: "Coordinador",_x000D_
  nodes: [{_x000D_
      text: "Encargado",_x000D_
_x000D_
    },_x000D_
    {_x000D_
      text: "Jefe",_x000D_
      nodes: [{_x000D_
          text: "Analista 1"_x000D_
        },_x000D_
        {_x000D_
          text: "Analista 2"_x000D_
        }_x000D_
      ]_x000D_
_x000D_
    },_x000D_
    {_x000D_
      text: "Jefe de Controles",_x000D_
      nodes: [{_x000D_
        text: "Encargado 1"_x000D_
      }]_x000D_
    },_x000D_
    {_x000D_
      text: "Jefe de Supervision",_x000D_
      nodes: [{_x000D_
          text: "Tecnico 1"_x000D_
        },_x000D_
        {_x000D_
          text: "Tecnico 2"_x000D_
        },_x000D_
        {_x000D_
          text: "Tecnico 3"_x000D_
        }_x000D_
      ]_x000D_
    }_x000D_
  ]_x000D_
}];_x000D_
_x000D_
/*var tree = '';_x000D_
$.each(data, function(i, item) {_x000D_
  //console.log(item.Nivel, item.NombrePuesto);_x000D_
  if (item.Nivel == 0) {_x000D_
tree += '[{text: "' + item.NombrePuesto + '"';_x000D_
  }_x000D_
  if (item.Nivel == 1) {_x000D_
tree += ', nodes: [{text: "' + item.NombrePuesto + '"}';_x000D_
  }_x000D_
  if (item.Nivel >= 2) {_x000D_
tree += ',{text: "' + item.NombrePuesto + '"}';_x000D_
  }_x000D_
});_x000D_
_x000D_
*/_x000D_
_x000D_
function cargarTreeView() {_x000D_
	$.each(data, function(i, item) {_x000D_
  _x000D_
  });_x000D_
_x000D_
  var $TreeV = $('#treeview').treeview({_x000D_
    data: tree_x000D_
  });_x000D_
}_x000D_
_x000D_
$(document).ready(function() {_x000D_
  cargarTreeView();_x000D_
});

_x000D_

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>_x000D_
<script src="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/js/bootstrap-treeview.js" type="text/javascript"></script>_x000D_
<link rel="stylesheet" href="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/css/bootstrap-treeview.css" />_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />_x000D_
<link rel="stylesheet" href="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/css/bootstrap-treeview.css" />_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>_x000D_
_x000D_
<div class="col-sm-4">_x000D_
  <div id="treeview" class="treeview">_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

solución

No es nada corto pero acá está la conversión, utilizando el mismo ejemplo que dejaste.

Luego puedes pasar este Objeto a la funcion cargarTreeView

_x000D_

_x000D_

var data = [{_x000D_
  "Nivel": 0,_x000D_
  "NombrePuesto": "Coordinador"_x000D_
}, {_x000D_
  "Nivel": 1,_x000D_
  "NombrePuesto": "Encargado"_x000D_
}, {_x000D_
  "Nivel": 1,_x000D_
  "NombrePuesto": "Jefe"_x000D_
}, {_x000D_
  "Nivel": 2,_x000D_
  "NombrePuesto": "Analista 1"_x000D_
}, {_x000D_
  "Nivel": 2,_x000D_
  "NombrePuesto": "Analista 2"_x000D_
}, {_x000D_
  "Nivel": 1,_x000D_
  "NombrePuesto": "Jefe de Controles"_x000D_
}, {_x000D_
  "Nivel": 2,_x000D_
  "NombrePuesto": "Encargado 1"_x000D_
}, {_x000D_
  "Nivel": 1,_x000D_
  "NombrePuesto": "Jefe de Supervision"_x000D_
}, {_x000D_
  "Nivel": 2,_x000D_
  "NombrePuesto": "Tecnico 1"_x000D_
}, {_x000D_
  "Nivel": 3,_x000D_
  "NombrePuesto": "Tecnico 2"_x000D_
}, {_x000D_
  "Nivel": 4,_x000D_
  "NombrePuesto": "Tecnico 3"_x000D_
}];_x000D_
_x000D_
var lastIndex = 0;_x000D_
var texto = "[{";_x000D_
var add1 = "";_x000D_
var add2 = "";_x000D_
var search = 0;_x000D_
var i = 0;_x000D_
$.each(data, function (i, item) {_x000D_
  _x000D_
  if (item.Nivel > lastIndex) {_x000D_
     search = texto.lastIndexOf('}');_x000D_
     if (search !== -1 && lastIndex != 0) {_x000D_
        texto = texto.substr(0, search)+", ";_x000D_
     }_x000D_
     texto += '"nodes": [';_x000D_
     _x000D_
  } else if (lastIndex > item.Nivel) {_x000D_
     texto = texto.substr(0, texto.length-2);_x000D_
     texto += "]";_x000D_
     for (i = 1; i < lastIndex - item.Nivel; i++) {_x000D_
       texto += "}]";_x000D_
     }_x000D_
     texto += "}";_x000D_
     texto += ",";_x000D_
  }_x000D_
  if (item.Nivel > 0){_x000D_
  	  add1 = "{";_x000D_
      add2 = "}";_x000D_
  }_x000D_
  texto += add1+'"text": '+'"'+item.NombrePuesto+'"'+add2+', ';_x000D_
  lastIndex = item.Nivel;_x000D_
});_x000D_
texto = texto.substr(0, texto.length-2);_x000D_
if (lastIndex > 0) {_x000D_
     texto += "]";_x000D_
     for (i = 0; i < lastIndex; i++) {_x000D_
       texto += "}]";_x000D_
     }_x000D_
}_x000D_
//console.log(texto);_x000D_
var tree = [];_x000D_
// Puedes luego parsear este a un Object JSON._x000D_
try {_x000D_
   tree = JSON.parse(texto);_x000D_
}catch (exception) {_x000D_
   console.log(exception);_x000D_
}_x000D_
//console.log(tree);_x000D_
_x000D_
function cargarTreeView() {    _x000D_
  var $TreeV = $('#treeview').treeview({_x000D_
    data: tree_x000D_
  });_x000D_
}_x000D_
$(document).ready(function() {_x000D_
    cargarTreeView();_x000D_
   });

_x000D_

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>_x000D_
<script src="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/js/bootstrap-treeview.js" type="text/javascript"></script>_x000D_
<link rel="stylesheet" href="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/css/bootstrap-treeview.css" />_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />_x000D_
<link rel="stylesheet" href="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/css/bootstrap-treeview.css" />_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>_x000D_
_x000D_
<div class="col-sm-4">_x000D_
  <div id="treeview" class="treeview">_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

PD: Eventualmente este código puede ser optimizado.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *