在陣列循環獲取父對象的名稱

Question

我有以下對象數組：以遞歸的方式，通過這個

payload: [ 
    {name: one}, 
    {name: two, 
    values: {name: five} 
    }, 
    {name: three}, 
    {name: four} 
] 

我環路，因爲這個深度的數據都可以隨時更改。因此name: five可以再次擁有自己的值。
現在當我遍歷一個對象的值時，我想要父對象的名稱。因此，對於name: five我想在方法中獲得two。

有什麼方法可以獲得這個名字？

我使用vue.js一個Javascript庫。

這是我的循環：

<ul> 
    <div class="row"> 
     <li v-if="value.name" class="col-md-3 indent" @click="toggle"> 
      {{value.name}}: 
     </li> 
     <li v-else class="col-md-3 indent" @click="toggle"> 
      {{value.type}}: 
     </li> 
    </div> 
    <div v-show="open" v-if="isValue"> 
     <codeblock-value 
      v-for="value in value.values" 
      :value="value"> 
     </codeblock-value> 
    </div> 
</ul> 

我使這個循環像這樣在我的父文件：

<div class="row" v-for="value in payload.values"> 
    <codeblock-value 
     :value="value"> 
    </codeblock-value> 
</div> 

請記住，可以有與值的多個對象。

Answer 1

function recurse(parentName, obj) { 
    console.log("Parent name is: " + parentName); 
    console.log("Obj name is: " + obj.name); 

    if(obj.values) { 
     recurse(obj.name, obj.values); 
    } 
} 

recurse(payload[1]); 

Answer 2

如果你可以稍微改變你的有效載荷結構，它會讓生活變得更容易一些。

JSFIDDLE

JS

var payload = { 
    name: "payload", 
    values: [{ 
     name: "one" 
    }, { 
     name: "two", 
     values: [{ 
      name: "five" 
     }] 
    }, { 
     name: "three" 
    }, { 
     name: "four" 
    }] 
}; 

function dig(parent) { 
    console.log(parent.name); 
    if (parent.hasOwnProperty('values') && Array.isArray(parent.values)) { 
     for(var x = 0, len = parent.values.length; x < len; x++){ 
      dig(parent.values[x]); 
     } 
    } 
} 

dig(payload); 

更新VUE.JS 再一次，改變了數據結構允許用戶訪問父。在這個例子中，我動態生成測試數據，以便每個子節點引用其父（我投擲一些隨機性生成文件夾或不）。

JSFIDDLE

數據生成JS

var data = { 
    name: 'My Tree', 
    children: [] 
} 
var maxDepth = 4; 
function createChild(parent, currentDepth){ 
    var childrenValues = ['hello', 'wat', 'test']; 
    var createChildFolderChance = 0.5; 
    for(var x = 0, len = childrenValues.length; x < len; x++){ 
     var child = { 
      name: childrenValues[x], 
      parent: parent 
     } 
     if(Math.random() < createChildFolderChance && currentDepth < maxDepth){ 
      child.children = []; 
      currentDepth++; 
      createChild(child, currentDepth) 
     } 
     parent.children.push(child); 
    } 
} 

createChild(data, 0); 

更新Vue.JS單擊代碼

function() { 
    if (this.isFolder) { 
     this.open = !this.open 
    }else{ 
     var firstSiblingWithChildren; 
     // cycle through current node's parent's children (ie. siblings) and return the name of the first node that has children 
     for(var x = 0, len = this.model.parent.children.length; x < len; x++){ 
      if(this.model.parent.children[x].hasOwnProperty('children') && Array.isArray(this.model.parent.children[x].children)){ 
       firstSiblingWithChildren = this.model.parent.children[x].name; 
       break; 
      } 
     } 
     console.log(firstSiblingWithChildren); 
    } 
},