获取数组循环中父对象的名称

I have the following array of objects:

我有以下对象数组:

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

I loop through this in a recursive way, because this depth of the data can change anytime. So name: five can have there own values again.
Now when I loop through the values of an object, I want the name of the parent object. So for name: five I want to get two in a method.

我以递归的方式遍历这个,因为这个数据深度可以随时改变。所以名字:五个可以再次有自己的价值。现在,当我遍历对象的值时,我想要父对象的名称。所以对于名字:五,我想在方法中得到两个。

Is there any way to obtain this name?

有没有办法获得这个名字?

I use vue.js a a Javascript library.

我使用vue.js作为一个Javascript库。

This is my loop:

这是我的循环:

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

And I render this loop like this in my parent file:

我在我的父文件中渲染这样的循环:

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

Keep in mind that there can be multiple objects with values.

请记住,可以有多个具有值的对象。

2 个解决方案

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

#2

If you can change your payload structure slightly it would make life a bit easier.

如果你可以稍微改变你的有效载荷结构,它将使生活更容易一些。

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

UPDATE FOR VUE.JS Again, changing the data structure allows you to access the parent. In this example, i dynamically generate the test data so that each child node references its parent (I threw in some randomness to generate folders or not).

更新VUE.JS同样,更改数据结构允许您访问父级。在这个例子中,我动态生成测试数据,以便每个子节点引用其父节点(我抛出一些随机性来生成文件夹)。

JSFIDDLE

Data generation JS

数据生成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);

Updated Vue.JS click code

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