迭代未知深度的对象

Question

我正在做的事情有点历史…
我有一个php脚本，它将扫描目录(和所有子目录，子子等)，并将其存储在一个数组中，然后将其转换为JSON(强制对象)字符串。

然后我有一个javascript AJAX查询，它将从php页面抓取JSON字符串并将其解析回javascript对象。

我要做的是迭代对象(未知深度)，并将其显示为列表。如果是一个文件，给它一个<a onclick=""></a>，如果是一个文件夹，给它一个子列表<li>foldername<ul><li>contents</li></ul></li>

所以，我希望生成的东西看起来像这样…

<li><a onclick="">someFile</a></li>
<li><a onclick="">anotherFile</a></li>
<li>someFolder
  <ul>
    <li><a onclick="">deeperFile</a></li>
    <li><a onlick="">anotherDeeperFile</a></li>
  </ul>
</li>

的例子只有2个深度，但希望你们能明白:)

我有代码，将处理顶级的文件名。只是不是任何文件夹(对象)。
我将对象数组传递给它，它就会遍历…

function populateFunctions(arr){
  var genHTML = "";
  for (key in arr){
    if (typeof arr[key] === "string"){
      var fname = arr[key]
      //remove the extension, don't need it
      fname = fname.substring(0, fname.length - 4);
      genHTML = genHTML + "<li><a onClick="">" + fname + "</a></li>n";
    } else {
    }
  }
    return genHTML;
  }
}

我在这里读到(迭代JavaScript数组而不使用嵌套的for循环)关于使用递归函数…
然而，我想保存这个值，直到它完全迭代完成…

我想在更高的范围内使用变量(可能是"全局")会起作用，只是在每次函数运行时将值附加到变量…但还有别的办法吗?
我走对了吗?还是有更好/更有效的方法?

我发现很多东西都是关于迭代已知深度的多维数组/对象，而在这里，深度将与目录结构一样深。

这是我正在玩的JSON对象atm
{"mainPackage":{"0":"test.xml"},"somePackage":{"0":"anotherFunction.xml","deeper":{"0":"ohYouFoundMe.xml"},"1":"someFunction.xml"}}

如果需要更多的代码等，请告诉我。
提前感谢您的帮助:)

Answer 1

像这样遍历所有内容:

function populateFunction(arr){
    var mainContain=document.createElement('ul');
    function iterateThrough(obj,elt){
        Object.keys(obj).forEach(function(curKey){
            if(typeof obj[curKey]==='object'){
                var li=document.createElement('li');
                var tn=document.createTextNode(curKey);
                var ul=document.createElement('ul');
                li.appendChild(tn);
                li.appendChild(ul);
                elt.appendChild(li);
                iterateThrough(obj[curKey],ul);
            }
            else{
                var li=document.createElement('li');
                var aElt=document.createElement('a');
                //you'd want to add other stuff (such as href or onclick) to the a element here
                aElt.textContent=curKey;
                li.appendChild(aElt);
                elt.appendChild(li);
            }
        });
    }
    iterateThrough(arr,mainContain);
    return mainContain;
}

我不确定这在技术上是否符合递归函数，因为它不依赖于return，但它基本上是这样做的。还要注意，它返回一个DOM元素，而不是像原始的不完整函数那样返回字符串，因此需要考虑到这一点。工作示例:http://jsfiddle.net/BWn9t/