私は、オブジェクトの次の配列を持つ配列ループ

Question

で親オブジェクトの名前を取得します。そのため、name: fiveに再度値を設定することができます。
オブジェクトの値をループすると、親オブジェクトの名前が必要になります。だからname: fiveの方法でtwoを取得します。

この名前を取得する方法はありますか？

私はvue.js a Javaスクリプトライブラリを使用しています。

<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

ペイロード構造をわずかに変更することができれば、それはもっと簡単になります。 VUE.JS FOR

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); 

を再度更新し、データ構造を変更すると、あなたは親にアクセスすることができます。この例では、各子ノードが親を参照するようにテストデータを動的に生成します（フォルダを生成するかどうかをランダムに投げた）。

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); 
    } 
},