首页 > 解决方案 > 如何处理来自 jQuery Sortable(嵌套列表)的多维数组?

问题描述

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

{
  "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 sortable 示例中的代码:

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

任何帮助或建议都会很棒,谢谢!

标签: javascriptjqueryjsonjquery-ui-sortable

解决方案


如果你的 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;


推荐阅读