ceadreak ceadreak - 3 months ago 39
JSON Question

Jquery nestable / initialize list from json

I'm using the jquery nestable plugin (https://github.com/dbushell/Nestable/blob/master/jquery.nestable.js) to generate a nestable list.

Generation of a json output and save it into a database is not a problem.

Example of json generate by this plugin :


The question is : How can I construct the nestable list from the same json array ?


You can just form the required html from the array you have. Just wrap it up in a function that handles the nested elements (can be done by calling on itself) and returns the <ol> list.

var tarr = [{"id":4,"children":[{"id":3}]}];

function listify(strarr) {
  var l = $("<ol>").addClass("dd-list");
  $.each(strarr, function(i, v) {
    var c = $("<li>").addClass("dd-item"),
      h = $("<div>").addClass("dd-handle").text("Item " + v["id"]);
    if (!!v["children"])
  return l;

var list = listify(tarr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test"></div>