What is a promise in Javascript?

Question

raintrooper

Asked: 2020-04-05 15:08:47 +0800 CST 2020-04-05 15:08:47 +0800 CST 2020-04-05 15:08:47 +0800 CST

Generate TreeView with Json

772

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

The structure of the Json I receive is as follows:

 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 post level 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 have tried to go through the Json with a $.each but I cannot generate the correct structure since I am always left with plus or minus symbols. I read that it was possible to go through the Json and push to an array depending on the type of level, but I can't do it.

The query that generates the json has the following structure:

If someone can help me thank you very much.

This is the example of what it should look like, but I filled it in 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>

2 Answers

Voted

Kiko_L · Answer 1 · 2020-04-06T01:04:07+08:00

I have been giving it a few laps and I have 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 have had to make some changes such as quotes textand nodos, see what is the next node to know what to generate and the one JSON.parse(tree)to convert the generated string to an object. You will have to give it a polish in case there are more use cases (and you can optimize it) but as an initial idea I think it can work for you.

DMA VE · Answer 2 · 2020-04-06T04:28:28+08:00

It's not short at all but here's 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.

Generate TreeView with Json

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?