Depth priority traversal of multi-layer array objects
If this method is for the following third-level tree, you can get the grandfather Id, your own Id, and your father Id; in fact, if you want to get the label, just change it.
function treeFindPath(tree, func, path = []) {
if (!tree) return []
for (const data of tree) {
()
if (func(data)) return path
if () {
const findChildren = treeFindPath(, func, path)
if () return findChildren
}
()
}
return []
}
const i = treeFindPath(, node => === result)For example, the tree structure is like this
This is equivalent to a three-level tree
"data": [
{
"id": "1",
"label": "Active Center",
"type": "1",
"children": [
{
"id": "11",
"label": "Can bottom video",
"type": "2",
"children": [
{
"id": "111",
"type": "3",
"label": "Four blast furnaces 6 channels"
},
{
"id": "112",
"type": "3",
"label": "Western Slag Bottom"
}
]
},
{
"id": "12",
"label": "Gas cabinet station",
"type": "2",
"children": [
{
"id": "121",
"type": "3",
"label": "Road No. 13 02"
},
{
"id": "122",
"type": "3",
"label": "Road No. 13 01"
},
{
"id": "123",
"type": "3",
"label": "Mobile Center Top"
}
]
},
{
"id": "13",
"label": "Mobile Center Top",
"type": "2",
"children": [
{
"id": "131",
"type": "3",
"label": "44455666"
}
]
}
]
},
{
"id": "2",
"label": "Iron Smelting Plant",
"type": "1",
"children": [
{
"id": "21",
"label": "Neiyun Intelligent Connection",
"type": "2",
"children": [
{
"id": "211",
"type": "3",
"label": "Program Control Building 3rd Floor"
},
{
"id": "212",
"type": "3",
"label": "West side of the aisle on the 1st floor of the Program Control Building"
},
{
"id": "213",
"type": "3",
"label": "Lobby on the 2nd floor of the Program Control Building"
},
{
"id": "214",
"type": "3",
"label": "West side of the 5th floor of the company's main building"
}
]
},
{
"id": "22",
"label": "Carrier Sliding Line Area",
"type": "2",
"children": [
{
"id": "221",
"type": "3",
"label": "Full picture of steelmaking ball tank 1"
}
]
},
{
"id": "23",
"label": "Coking production operation area",
"type": "2",
"children": [
{
"id": "231",
"type": "3",
"label": "4#Wanli Storage Tank Full View" },
{
"id": "232",
"type": "3",
"label": "4#Wanli Medium Pressure Oxygen Press" },
{
"id": "233",
"type": "3",
"label": "4#Wanli Substation Low Voltage Room" }
]
}
]
},
{
"id": "3",
"label": "Steelmaking Plant",
"type": "1",
"children": [
{
"id": "31",
"label": "Modified metal and lifting area",
"type": "2",
"children": [
{
"id": "311",
"type": "3",
"label": "No. 8 hanging pommel"
},
{
"id": "312",
"type": "3",
"label": "Right of lifting point No. 8"
}
]
},
{
"id": "32",
"label": "Regional Monitoring",
"type": "2",
"children": [
{
"id": "321",
"type": "3",
"label": "Test Point 33"
},
{
"id": "322",
"type": "3",
"label": "Raw material span 1"
},
{
"id": "323",
"type": "3",
"label": "Slab LH Vanadium Iron Cabinet"
}
]
},
{
"id": "33",
"label": "Can number identification",
"type": "2",
"children": [
{
"id": "331",
"type": "3",
"label": "East end of the repair room"
}
]
}
]
},
{
"id": "4",
"label": "Cold Rolling Farm",
"type": "1",
"children": [
{
"id": "41",
"label": "Rolling Work Area",
"type": "2",
"children": [
{
"id": "411",
"type": "3",
"label": "Rolling Mill Main Control Room"
}
]
},
{
"id": "42",
"label": "General cold operation area",
"type": "2",
"children": [
{
"id": "421",
"type": "3",
"label": "Raw Material Library 1"
},
{
"id": "422",
"type": "3",
"label": "Raw Material Library 2"
}
]
},
{
"id": "43",
"label": "Galvanized Work Area",
"type": "2",
"children": [
{
"id": "431",
"type": "3",
"label": "Production operation inspection"
},
{
"id": "432",
"type": "3",
"label": "Rolling mill high pressure chamber"
}
]
},
{
"id": "44",
"label": "Inspection and maintenance work area",
"type": "2",
"children": [
{
"id": "441",
"type": "3",
"label": "Annealing furnace 4"
},
{
"id": "442",
"type": "3",
"label": "Annealing furnace 1"
}
]
}
]
}
]vue traversal of objects containing arrays
Recently, I developed my own blog. When traversing object type data, I couldn't get it. I tried two layers of traversal and couldn't do it. Finally, I solved it using a clever trick and recorded it:
After requesting, the data format is the following
data(){
return{
noticeList:{
notice:["aaaaa","bbbb","cccc"],
times:[1564707990252,1564708337658,1564707990252]
},
}
},Finally, iterates through this in html
<li v-for="(text,index) in " :key="index">
{{text}}<span>{{[index] | formatDate}}</span>
</li>The most important point is that the value corresponding to the index of the two arrays in the object is the corresponding value. It is a very clever way to traverse one of the arrays in the object and use the index during the traversal process to get the corresponding values in the other array.
The above is personal experience. I hope you can give you a reference and I hope you can support me more.