我希望嘗試將陣列連接到基本檔案夾層次結構。
在我下面的示例中，“級別 1”是最低級別，此級別沒有子檔案夾。“其他級別”將在“頂級”下有許多不同的檔案夾
我有資料的陣列如下：
[{ id: "Top Level", outerpath: "test plan", innerpath: "Regression" },
{ id: "other level", outerpath: "Regression", innerpath: "area 1" },
{ id: "Level 1", outerpath: "area 1", innerpath: "Subarea 1" },
{ id: "Level 1", outerpath: "area 1", innerpath: "Subarea 2" },
{ id: "Level 1", outerpath: "Regression", innerpath: "area 2" }]
現在我需要物件陣列中資料的串聯結果如下所示：
test plan/Regression/area 1/Subarea 1
test plan/Regression/area 1/Subarea 2
test plan/Regression/area 2
但是，我不知道如何開始。也許它沿著通過匹配“innerpath”和“outpath”值的陣列的回圈線，然后將完成的資料推送到另一個陣列？
任何想法都會非常有用。
更新：
為了擴展我的問題，陣列是動態的，根據 API 的結果，它可能像這個陣列
[{ id: "Top Level", outerpath: "test plan", innerpath: "Regression" }
{ id: "other level", outerpath: "Regression", innerpath: "area 1" }
{ id: "Level 1", outerpath: "area 1", innerpath: "Subarea 1" }
{ id: "other level", outerpath: "area 1", innerpath: "Subarea 2" }
{ id: "Level 1", outerpath: "Regression", innerpath: "area 2" }
{ id: "Top Level", outerpath: "test plan", innerpath: "other testing" }
{ id: "Level 1", outerpath: "other testing", innerpath: "other testing area 1" }
{ id: "other level", outerpath: "other testing", innerpath: "other testing area 2" }
{ id: "Level 1", outerpath: "other testing area 2", innerpath: "other testing subarea 1" }
{ id: "Level 1", outerpath: "Subarea 2", innerpath: "SubSubArea 1" }]
因此，不會只有一個頂級，它可以是多個頂級，因為檔案夾“測驗計劃”將有多個檔案夾，其中一些檔案夾有自己的子檔案夾。
我從 API 呼叫的回呼中整理資料的代碼在這里：
let testSuiteData = res;
testSuiteData.value.forEach(async testSuiteItem => {
console.log(testSuiteItem);
if(!testSuiteItem.hasChildren === true) // Level 1
{
console.log(testSuiteItem.parentSuite.name '/' testSuiteItem.name)
folderHierarchy.path.push({
id: 'Level 1',
outerpath: testSuiteItem.parentSuite.name,
innerpath: testSuiteItem.name
})
}
else if(testSuiteItem.hasChildren === true ) // other levels
{
if(testSuiteItem.parentSuite.name === testSuiteItem.plan.name) // Top Level
{
console.log(testSuiteItem.parentSuite.name '/' testSuiteItem.name)
folderHierarchy.path.push({
id: 'Top Level',
outerpath: testSuiteItem.parentSuite.name,
innerpath: testSuiteItem.name
})
}
else{ // Other Levels
console.log(testSuiteItem.parentSuite.name '/' testSuiteItem.name)
folderHierarchy.path.push({
id: 'other level',
outerpath: testSuiteItem.parentSuite.name,
innerpath: testSuiteItem.name
})
}
}
console.log(folderHierarchy.path);
uj5u.com熱心網友回復：
你可以做這樣的事情
const array = [{ id: "Top Level", outerpath: "test plan", innerpath: "Regression" },
{ id: "other level", outerpath: "Regression", innerpath: "area 1" },
{ id: "Level 1", outerpath: "area 1", innerpath: "Subarea 1" },
{ id: "Level 1", outerpath: "area 1", innerpath: "Subarea 2" },
{ id: "Level 1", outerpath: "Regression", innerpath: "area 2" }]
const obj = {}; // a map of all our paths
const topLevel = array.splice(0, 1)[0]; // removing the top level from array as it is not needed, and for further reference
const base = `${topLevel.outerpath}/${topLevel.innerpath}`; // creating our default path, which we will use as a reference later
for (let i = 0; i < array.length; i ) {
const path = array[i].outerpath.split(' '); // creating a unique key for our map
const key = path[1] ? path[1] : path[0];
if (!obj[key]) obj[key] = [];
if (path[0] == 'area')
obj[key].push(`${base}/${array[i].outerpath}/${array[i].innerpath}`);
else if (path[0] == 'Regression')
obj[key].push(`${base}/${array[i].innerpath}`)
}
console.log(obj);uj5u.com熱心網友回復：
我的方法步驟：
- 找到第一個元素
- 找到這個元素的孩子
- 檢查子元素的子元素
- 重復步驟 3 直到你有整棵樹
- 壓扁你的樹
嘗試自己做，然后才檢查此示例以了解如何實作。
顯示代碼片段
class TreeList {
tree = null;
isTopLevel = (level) => {
let topLevel = true;
this.data.map(lv => {
if (lv.innerPath === level.outerPath) {
topLevel = false;
}
});
return topLevel;
}
createTree = (data) => {
this.data = data;
data.map(level => {
if (this.isTopLevel(level)) {
this.tree = level;
}
});
if (this.tree === null) {
console.error('Couldn\'t find top level.');
return;
}
this.tree = this.findChildLevels(this.tree);
return this.flattenObject(this.tree);
}
findChildLevels = (level) => {
this.data.map(lv => {
if (lv.outerPath === level.innerPath) {
if (level?.children === null || level?.children === undefined) {
level.children = [];
}
level.children.push(this.findChildLevels(lv));
}
});
return level;
}
flattenObject = (level) => {
let currentPath = level.outerPath;
let list = [];
if (level?.children !== undefined && level?.children !== null) {
level.children.map(child => {
this.flattenChildren(list, currentPath, child);
});
} else {
list = [currentPath];
}
return list
}
flattenChildren = (list, currentPath, level) => {
if (level?.children !== undefined && level?.children !== null) {
// currentPath = `/${level.outerPath}`;
currentPath = '/' level.outerPath;
level.children.map(child => {
this.flattenChildren(list, currentPath, child)
});
} else {
// list.push(`${currentPath}/${level.outerPath}/${level.innerPath}`);
list.push(currentPath '/' level.outerPath '/' level.innerPath);
}
return list;
}
}
const tl = new TreeList()
const list = tl.createTree([
{id: "Top Level", outerPath: "test plan", innerPath: "Regression"},
{id: "other level", outerPath: "Regression", innerPath: "area 1"},
{id: "Level 1", outerPath: "area 1", innerPath: "Subarea 1"},
{id: "Level 1", outerPath: "area 1", innerPath: "Subarea 2"},
{id: "Level 1", outerPath: "Regression", innerPath: "area 2"}
]);
list.map(item => {
console.log(item);
});uj5u.com熱心網友回復：
我認為我們可以通過首先創建一個所有innerpath不作為outerpath值出現的唯一值的串列，然后從每個值向后遍歷來進一步簡化這一點。
下面是使用最新的動態物件陣列時的樣子：
我
id從你的原始資料中排除了屬性值，因為它似乎沒有在任何地方使用，只是為了保持這個例子簡潔，但你當然可以在你的最終版本中添加它。
const data = [
{ outerpath: "test plan", innerpath: "Regression" },
{ outerpath: "Regression", innerpath: "area 1" },
{ outerpath: "area 1", innerpath: "Subarea 1" },
{ outerpath: "area 1", innerpath: "Subarea 2" },
{ outerpath: "Regression", innerpath: "area 2" },
{ outerpath: "test plan", innerpath: "other testing" },
{ outerpath: "other testing", innerpath: "other testing area 1" },
{ outerpath: "other testing", innerpath: "other testing area 2" },
{ outerpath: "other testing area 2", innerpath: "other testing subarea 1" },
{ outerpath: "Subarea 2", innerpath: "SubSubArea 1" }
];
const outerpaths = data.map(({ outerpath }) => outerpath),
innerpaths = data.map(({ innerpath }) => innerpath).filter(innerpath => !outerpaths.includes(innerpath));
const concatenated = innerpaths.map(innerpath => {
let obj = data.find(obj => obj.innerpath === innerpath),
str = obj.outerpath '/' innerpath,
i = 0;
do {
obj = data.find(({ innerpath }) => obj.outerpath === innerpath);
if (obj) str = obj.outerpath '/' str;
i ;
} while (i < 20 && obj)
return str;
});
console.log(concatenated.join('\n'));轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/346634.html
標籤：javascript 数组 目的
下一篇：如何從陣列中洗掉陣列？