Inheritance parent-group child-group in Vue.js - vue.js

Question

How do I create a list of a parent-group (values will be passed from the database) with a child-group in it, which will have the same values as the parent-group.
For example a value called "assignment" which only allow objects.

Answer 1

// DB Set
// DB_table_field = value : [1, 2, 3 , 4, 5], parent_id : [2, 0, 4, 1, 1] // rand two field of id, and parent_id
// sample arr
var sampleArr = [1, 2, 3]
// find parent of parent array
var mergeArr = []
var arr = []
var oi = 2
var coi = oi
arr.push(oi)
while (oi > 0) {
var poi = sampleArr.find(status => status.value === parseInt(oi)).parent_id
if (poi === coi) {
oi = 0
} else {
oi = poi
if (oi > 0) {
arr.push(oi)
}
}
}
// find child of child array
var intialArrMyChild = []
var myId = 1
var myChild = sampleArr.filter(status => status.parent_id === parseInt(myId))
myChild.forEach(element => intialArrMyChild.push(element.value))
var rtnArr = []
var intialArr = []
var xChildArr = []
rtnArr = intialArrMyChild
intialArr = intialArrMyChild
while (rtnArr.length > 0) {
intialArr.forEach(service => {
xChildArr = []
var loopFindChild = sampleArr.filter(status => status.parent_id === parseInt(service))
loopFindChild.forEach(element => xChildArr.push(element.value))
loopFindChild.forEach(element => intialArr.push(element.value))
})
rtnArr = xChildArr
}
var childArr = intialArr.filter(function (item, pos) {
return intialArr.indexOf(item) === pos
})
mergeArr = arr.concat(childArr)
var arrc = mergeArr
var filteredArray = arrc.filter(function (item, pos) {
return arrc.indexOf(item) === pos
})
console.log(filteredArray, 'parentChildfilteredArray')