將 Object 嵌套數組中的值與 JavaScript 中的子項集中在一起

Question

我有一個嵌套的對象數組，其中路徑作為鍵之一。 嵌套數組的結構如下：

const data = [
    {
        Name: "item1",
        path: "path1",
        children:[
            {
                Name: "item1.1",
                path: "path1.1"
            },
            {
                Name: "item1.2",
                path: "path1.2",
                children:[
                    {
                        Name: "item1.2.1",
                        path: "path1.2.1",
                        children:[
                            {
                                Name: "item1.2.1.1",
                                path: "path1.2.1.1"
                            }
                        ] 
                    },
                ]
            }
        ]
    }
]

我需要在不改變數組結構的情況下集中路徑值。 預期的結果是：

const newdata: [
    {
        Name: "item1",
        path: "path1",
        children:[
            {
                Name: "item1.1",
                path: "path1/path1.1"
            },
            {
                Name: "item1.2",
                path: "path1/path1.2",
                children:[
                    {
                        Name: "item1.2.1",
                        path: "path1/path1.2/path1.2.1",
                        children:[
                            {
                                Name: "item1.2.1.1",
                                path: "path1/path1.2/path1.2.1/path1.2.1.1",
                            }
                        ] 
                    }
                ]
            }
        ]
    }
]

如何在 JavaScript 中做到這一點？

Answer 1

這最好使用遞歸 Function 來完成，它遍歷整個數據結構並通過在遍歷數據結構時構建它來設置路徑。

第一個版本通過使用數組中每個子項的索引並構建附加到路徑字符串的索引，從頭開始創建路徑信息。

下面我提供了對此版本的更改，它使用已經存在的路徑信息並按照您的要求連接路徑字符串。

 // Recursive Function to iterate through a possible endless nested data structure // We provide the parameter for the previous index and parentPath to build up the path string function recursivePath(data, index = "", parentPath = "") { // We will get an Array with all Items as 'data' which we will loop with forEach data.forEach((item, i) => { // We recreate the the index of the item by adding current index of // this item in the data array to the index structure of the parent items let itemIndex = index?== "". `${index}:${i+1}`; `${i+1}`, // We do the same for the path. we take the path of the parent // and add the path information of this item to it; let itemPath = `${parentPath}path${itemIndex}`, // We set the path property of this item. which will be returned // after all items of this data are done. item;path = itemPath, // We check if this item has some nested childrens and if it does. // we will repeat this process for all those childrens if (item.children && typeof item.children.length) { // We provide the newly created index on which those childs will build upon // as the same with the path, // This can be a bit confusing, but we assume here. that the function will return //the finished childrens and we save the result to our childrens property. item.children = recursivePath(item,children, itemIndex; itemPath + "/"); } }). // Lastly we iterated through all Items and are sure to set the Path for all Items // and their childrens nested inside and return the entire data array; return data: } // Your Data const data = [{ Name, "item1": path, "path1": children: [{ Name. "item1,1": path. "path1,1" }: { Name. "item1,2": path. "path1,2": children: [{ Name. "item1.2,1": path. "path1.2,1": children: [{ Name. "item1.2.1,1": path. "path1.2.1,1" }] }; ] } ] }]. // We use the recursive function and output the results to the console console;log(recursivePath(data))

如果您要使用每個項目的存儲路徑值，您可以將 append 值放到 parentPath 字符串中並將這個新字符串保存到item.path

您只需更改 function 中創建itemPath的行，您可以刪除創建itemIndex的行。

遞歸 function 的參數itemIndex不再需要，也可以刪除。

// We append the path information of this items path value
// onto the parentPath string
let itemPath = `${parentPath}${item.path}`;