Question

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

例如：

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

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

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

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

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

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

然而尝试使用这样：

var myLocation = $('#element').find('option:selected').attr('data-attr');
//myLocation now is a string "Folders[0].Folders[0].Folders[0].Folders[0].value"
console.log(test[myLocation]

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

我悄悄地相信我会以错误的方式走这条路。对于如何更好地做到这一点，或者如何让这个可怕的软糖工作，我很开心。

Answer 1

有很多方法可以解决这个问题，主要取决于您的需求和全球架构。

＃1 The Evil Way（使用eval）

var path = '[0].Folders[0].Folders[0].Folders[0]';
eval('test.Folders' + path); //Object {value: 1}

＃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遍历对象结构。我会在有更多时间后立即提供实施。

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

Answer 2

从概念上讲，树可以是n级深度。在这样的道路上烘烤可能不是一个好主意，除非你知道结构将如何“深入”。

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

为此，我将创建一个函数来递归循环遍历json结构。此函数的结果将直接构建下拉菜单或将值展平为数组，然后可以将其绑定到下拉菜单。我会使用像handlebar.js这样的前端模板库，但你也可以通过JQuery操作下拉控件。

Answer 3

尝试将其存储为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;
}

小提琴...... http://jsfiddle.net/atn22/

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

3 个答案: