Javascript遍历未知深度对象

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

我在这里 ( Iterate over a JavaScript array without using nested for-loops ) 阅读了关于使用递归函数的内容...
但是，我想存储该值，直到它完全完成迭代...

我想在更高范围(可能是“全局”)中使用变量会起作用，只需在每次函数运行时将值附加到变量...但是还有其他方法吗？
我在正确的轨道上吗？还是有更好/更有效的方法？

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

这是我用 atm 玩的 JSON 对象
{"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/