Javascript 将对象中的位置作为变量传递

我有一个大对象，混合了数据数组（它是文件夹和图像的树状视图-我无法控制这里输出的内容）

例如：

var test = {
   Folders: [{
      Folders:[{
         Folders:[{
            Folders:[
               {value:1},{value:2}
            ]
         }]
      }]
      },{}
   ]
}

值1（在我的例子中是图像）可以在这里找到：

test.Folders[0].Folders[0].Folders[0].Folders[0].value

我的最终用户使用下拉菜单选择他们的文件夹，我需要通过下拉菜单传递位置

我已尝试将“路径”添加到下拉列表的data attr属性中：

<option value="folder6" data-attr="[0].Folders[0].Folders[0].Folders[0]">Folder6</option>

不起作用（这取决于数组和数字，因为以这种方式传递字符串作为对象位置通常是有效的）

---

我悄悄地相信我走错了路。我对如何更好地做这件事持开放态度，或者如何让这种可怕的软糖发挥作用。

从概念上讲，一棵树可以有n层深。在这样的路径上烘烤可能不是一个好主意，除非你提前知道结构的“深度”

看起来您可能正试图在下拉列表中显示每个可能的文件夹（或者仅显示带有图像的文件夹）

---

为此，我将创建一个递归循环json结构的函数。该函数的结果要么直接构建下拉菜单，要么将值展平到一个数组中，然后将该数组绑定到下拉菜单。我将使用前端模板库，如handlebar.js，但您也可以操作dro通过JQuery进行pdown控制。

解决此问题的方法很多，主要取决于您的需要和全局架构

#1邪道（使用eval）

#2使用对象作为映射索引每个文件夹

var foldersMap = {};
//loop over your tree and build the index
foldersMap[path] = folder;

//then retrieve it later
foldersMap[path];

#3将对象直接存储在选项上

//while building the option
optionEl.folder = folder;

//then later retrieve it from the selected option
yourSelect.options[yourSelect.selectedIndex].folder;

#4创建您自己的keypath函数，该函数可以基于字符串keypath而不是使用eval遍历对象结构。我将在有更多时间时提供实现。

---

可能还有很多其他方法，但这些都只是想法。

尝试将其存储为

data attr

中的JSON数组。jQuery将以数组的形式将其取出。然后您只需找到一种方法来循环它。这是我的第一个尝试（没有验证和异常处理）

HTML:

<select>
    <option data-attr="[0,0,0,0]">Foo</option>
</select>

福

JavaScript:

var test = {
    Folders: [{
        Folders: [{
            Folders: [{
                Folders: [{
                    value: 1
                }, {
                    value: 2
                }]
            }]
        }]
    }, {}]
};


var folderIndexes = $("option").data("attr"); // an array

alert(getValue(test, folderIndexes));

function getValue(folders, folderIndexes) {
    for (var i = 0; i < folderIndexes.length; i++) {
        folders = folders.Folders[folderIndexes[i]];
    }
    return folders.value;
}

var测试={
文件夹：[{
文件夹：[{
文件夹：[{
文件夹：[{
价值：1
}, {
价值：2
}]
}]
}]
}, {}]
};
var folderindex=$（“option”）.data（“attr”）；//数组
警报（getValue（测试、文件夹索引））；
函数getValue（文件夹、文件夹索引）{
对于（var i=0；i

---

根据您的示例，即使是

test[Folders[0]。Folders[0]。Folders[0]。Folders[0]。Folders[0]。value]

不起作用。你的真实代码可能发生了类似的情况？有点打字错误或顺序/范围错误？我的递归循环很好，我在下拉列表中显示每个文件夹，我的问题是一旦用户选择某个文件夹，我需要知道该文件夹在树中的位置。酷，现在我明白了。是的，在e data attrib只会给你一个“对象”。在递归结构中使用一个变量（字符串变量）来记录你当前在文件夹结构中的位置如何。将data attrib值设置为这个字符串变量。string path=“/”，first recursion->path=“/Folder1”，second recursion->path=“/Folder1/Folder2/”我想建议#3。您已经存储了“路径”，您可以直接引用对象的该部分。没有任何说明您对对象的所有引用都必须指向根。

<select>
    <option data-attr="[0,0,0,0]">Foo</option>
</select>

var test = {
    Folders: [{
        Folders: [{
            Folders: [{
                Folders: [{
                    value: 1
                }, {
                    value: 2
                }]
            }]
        }]
    }, {}]
};


var folderIndexes = $("option").data("attr"); // an array

alert(getValue(test, folderIndexes));

function getValue(folders, folderIndexes) {
    for (var i = 0; i < folderIndexes.length; i++) {
        folders = folders.Folders[folderIndexes[i]];
    }
    return folders.value;
}