如何从多维数组的数组中删除项目

Question

我需要一些关于如何从 TreeView 中删除项目的帮助（这是一个 Vue.js 项目），TreeView 是基于这样的元素构建的：

[
    {
        "id": 1,
        "name": "COMERCIALIZAÇÃO",
        "idp": "",
        "children": [
            {
                "id": 5,
                "name": "Pasta 1",
                "idp": 1,
                "children": [
                    {
                        "id": 6,
                        "name": "Pasta 1 2",
                        "idp": 5,
                        "children": [
                            {
                                "id": 7,
                                "name": "NO.FT.DRC.01.00.001.pdf",
                                "file": "pdf",
                                "idp": 6
                            },
                            {
                                "id": 8,
                                "name": "PR.FT.DRC.01.00.003.pdf",
                                "file": "pdf",
                                "idp": 6
                            }
                        ]
                    },
                    {
                        "id": 9,
                        "name": "imprimir p luiza.pdf",
                        "file": "pdf",
                        "idp": 5
                    },
                    {
                        "id": 66,
                        "name": "Pasta 1 3",
                        "idp": 5,
                        "children": [
                            {
                                "id": 77,
                                "name": "NO.FT.DRC.01.00.001.pdf",
                                "file": "pdf",
                                "idp": 66
                            },
                            {
                                "id": 88,
                                "name": "PR.FT.DRC.01.00.003.pdf",
                                "file": "pdf",
                                "idp": 66
                            }
                        ]
                    }
                ]
            },
            {
                "id": 10,
                "name": "Backend.docx",
                "file": "pdf",
                "idp": 1
            },
            {
                "id": 0,
                "name": "DT.DC.RPI.03.03.1235_V2.docx",
                "file": "pdf",
                "idp": 1
            }
        ]
    },
    {
        "id": 2,
        "name": "DISTRIBUIÇÃO",
        "idp": "",
        "children": [
            {
                "id": 11,
                "name": "Pasta 2",
                "idp": 2,
                "children": [
                    {
                        "id": 12,
                        "name": "pasta 2 1",
                        "idp": 11,
                        "children": [
                            {
                                "id": 13,
                                "name": "script.sql",
                                "file": "pdf",
                                "idp": 12
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        "id": 3,
        "name": "GERAÇÃO",
        "idp": "",
        "children": [
            {
                "id": 14,
                "name": "Pasta 3",
                "idp": 3
            }
        ]
    },
    {
        "id": 4,
        "name": "SERVIÇOS",
        "idp": "",
        "children": [
            {
                "id": 5,
                "name": "teste",
                "idp": 4
            }
        ]
    }
]

我不确定，但我认为描述该元素的最佳方式是：多维数组的数组，对吧？

我创建了一个 CodePen 来显示我在使用递归时得到的最接近的结果，但我的肯定不是最好的解决方案，因为它不适用于每次删除。看看我的代码：https://codepen.io/luizarusso/pen/zYxLOPb?editors=1010

for (let i = 0; i < items.length; i++) {
    if (items[i].id == item.id) {
        //se achou o cara que vai ser removido, chama a função de remover
        return this.removeItem(i);
    } else {
        if (items[i].children) {
            if (items[i].idp == "") {
                this.caminho = [];
            }
            this.caminho.push(i);
            this.delFile(item, items[i].children);
        } else {
            if (items.length == 1 + i) {
                this.caminho.pop();
            }
        }
    }
}

有什么想法吗？如果你愿意，可以直接在 CodePen 上优化我的代码:)

编辑：澄清一下，我的问题完全在于如何通过 id 删除元素。当用户单击 bin 图标时，我知道我需要删除什么元素，但我不知道如何将它从数组中删除。 Map、Filter 和其他原生 JS 函数无法对 arrays/JSON 的数组执行此操作，因此我很难使用递归或其他方法来使其工作。

Answer 1

您需要查看对象，而不仅仅是数组。让我推荐一个示例库。 https://github.com/leezng/vue-json-pretty.

如果您对多维数组迭代和过程有疑问，我认为您必须在 javascript and/or 算法标签上提问。希望这个回答对您有所帮助。

Answer 2

问题出在我放置 this.caminho.pop()

的位置

我应该只在 "else" 比较当前项目的 ID 和我要查找的项目的 ID 的条件下这样做。

delFile(item, items) {
    for (let i = 0; i < items.length; i++) {
        if (items[i].id == item.id) {
            //if the current item has the same id as the item I'm looking for
            //it means I found the guy and I call the function to remove it
            return this.removeItem(i);
        } else {
            //otherwise, I keep on searching
            if (items[i].children) {
                //if the item on the actual index have children, I'll search among them
                if (items[i].idp == "") {
                    //if the items doesn't have a parent, I clean the "caminho" (path) var. That var traces the route till the item I'm looking for
                    this.caminho = [];
                }
                //I push the index to the var that traces the route
                this.caminho.push(i);
                //I call the function back again, now with the child items
                this.delFile(item, items[i].children);
            }
            if (items.length == 1 + i) {
                //if the item's lenght has been completely coursed, I pop the index out of the var that holds the route, because at this point I know the item I'm looking for is not among them
                this.caminho.pop()
            }
        }
    }
},

解决方法如下：https://codepen.io/luizarusso/pen/zYxLOPb 适用于任何深度的树视图

如何从多维数组的数组中删除项目

How to remove items from an array of multidimensional arrays

javascript

treeview

object

multidimensional-array