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

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

2 个答案: