Q:

How to process multidimensional array from jQuery Sortable (nested list)?

I'm working with jQuery Sortable to create some block of codes with nested list ( for loop and function block), then I got this json string use JSON.stringify on console.log(jsonString):
{
  "codes": [
    [
      {
        "id": "code_run",
        "code": "run",
        "name": "code_when_run"
      },
      {
        "id": "",
        "code": "loop",
        "name": "code_block_repeat",
        "children": [
          [
            {
              "id": "",
              "code": "up",
              "name": "code_arrow_up"
            },
            {
              "id": "",
              "code": "up",
              "name": "code_arrow_up"
            }
          ]
        ]
      }
    ]
  ]
}

Here's my code from the jQuery sortable's example :
let oldContainer, codeBlockId, codeBlockItem;

$("ol.nest_workspace").sortable({
    group: 'nested',
    onDragStart: function ($item, container, _super) {
    // Duplicate items of the no drop area
    if(!container.options.drop)
      $item.clone().insertAfter($item);
    _super($item, container);
  },
    afterMove: function (placeholder, container) {

        if(oldContainer != container){
            if(oldContainer)
                oldContainer.el.removeClass("active");
            container.el.addClass("active");

            oldContainer = container;
        }
    },
    onDrop: function ($item, container, _super) {
        container.el.removeClass("active");

        $item.addClass("block_code_on_workspace");

        var data = group.sortable("serialize").get();

    var jsonString = JSON.stringify({"codes":data}, null, '\t');
        console.log(jsonString);
        _super($item, container);

    },

});

How can I process the sub array (children[]) ?
I have plan to make it all block as a real codes, so it could execute with another function.
I may expect the text output printed some function like moveUp(), or if its loop with some function inside, then would be like :
for (var i = 0; i < 3; i++) { 
  moveUp();
}

Any help or suggest would be great, thanks!

A:

I've found a solution for my problem, here's the code :
$("ol.nest_workspace").sortable({
    group: 'nested',
    onDragStart: function ($item, container, _super) {
    // Duplicate items of the no drop area
    if(!container.options.drop)
      $item.clone().insertAfter($item);
            if($item.hasClass('RepeatCode')){
                $item.attr('id','block_loop_function_drag');
            }
    _super($item, container);
  },
    afterMove: function (placeholder, container) {

        if(oldContainer != container){
            if(oldContainer)
                oldContainer.el.removeClass("active");
            container.el.addClass("active");

            oldContainer = container;
        }
    },
    onDrop: function ($item, container, _super) {
        $(".coding-script").empty();
        container.el.removeClass("active");

        $item.addClass("block_code_on_workspace");
        $hasID = document.getElementById('block_loop_function_drag');

        var data = group.sortable("serialize").get();
        // console.log(data);

        for(var i = 0; i < data[0].length; i++){

            if($hasID){
                $item.attr('id','block_loop_function_'+i+'');
            }

            var obj = data[0][i];
            if(obj.hasOwnProperty("children")){

                var objChildren = obj.children[0];

                console.log(obj.code +'-'+i);
                ConvertToCodeScripts(obj.code, i);

                for(var j = 0; j < objChildren.length; j++){
                    console.log('loop-'+i+'-'+objChildren[j].code);
                    ConvertToCodeScripts('loop-'+i+'-'+objChildren[j].code, i);
                }

            }
            else{
                console.log(obj.code);
                ConvertToCodeScripts(obj.code, i);
            }
            console.log('lha - '+i);
        }
        _super($item, container);

    },
});

But let me know if you guys have a better solution.
Cheers

