we all have seen how to add items dynamically to nestable.
I have written this code, where in you can create nestable items from JSON object.
//JSON Object
var json = [{
"id": 1,
"content": "Payment Terms",
"children": [{
"id": 2,
"content": "PT1"
}, {
"id": 3,
"content": "PT2"
}]
}, {
"id": 4,
"content": "Delivery Terms",
"children": [{
"id": 5,
"content": "dt1"
}, {
"id": 6,
"content": "dt2"
}]
}];
Function to create nestable :
function makeNestableListUsingJSONArray(jsonArray, root) {
if (typeof root === 'undefined') {
root = $('body');
}
var $div = $('<div id="nestable"><ol class="dd-list"></ol></div>');
root.append($div);
for (var i = 0; i < jsonArray.length; i++) {
var $li = $("<li class='dd-item' data-id='" + jsonArray[i].id + "'><div class='dd-handle'><span class='dd-content'>" + jsonArray[i].content + "</span></div></li>");
root.find('ol.dd-list:first').append($li);
if (typeof jsonArray[i].children !== 'undefined') {
makeNestableListUsingJSONArray(jsonArray[i].children, $li);
}
}
$('#nestable').nestable({maxDepth:2});
}
call the function
makeNestableListUsingJSONArray(json);