如何处理来自 jQuery 可排序（嵌套列表）的多维数组？

Question

我正在使用 jQuery Sortable 创建一些带有嵌套列表的代码块（for 循环和函数块），然后我得到了这个 json 字符串 use JSON.stringify on console.log(json字符串):

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

这是我在 jQuery 可排序示例中的代码：

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);

    },


});

如何处理子数组 (children[])？

我打算把它全部做成一个真正的代码块，这样它就可以用另一个函数来执行。

我可能希望文本输出打印一些像 moveUp() 这样的函数，或者如果它的循环内部有一些函数，那么会像 :

for (var i = 0; i < 3; i++) { 
  moveUp();
}

任何帮助或建议都将非常有用，谢谢！

Answer 1

如果你的 JSON 字符串总是这样。然后你可以像这样定位“children”数组。

我只根据上面的 JSON 格式编写了此代码。

const childrenArr = jsonString.codes[0][1].children;

根据我们正在对您的数据进行字符串化的代码，此代码应该有效。

var jsonString = JSON.stringify({"codes":data}, null, '\t'); console.log(jsonString), ChildrenArr = jsonString.codes[0][1].children;

Answer 2

我找到了解决问题的方法，代码如下：

$("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);

    },
});

但如果你们有更好的解决方案，请告诉我。

干杯

如何处理来自 jQuery 可排序（嵌套列表）的多维数组？

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

javascript

jquery

json

jquery-ui-sortable