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）关于使用递归函数...
但是，我想存储该值，直到完成迭代完全...

我想在更高的范围内使用变量（可能＆＃39; global＆＃39;）会起作用，只需在每次函数运行时将值附加到变量上......但还有另一种方法吗？
我是在正确的轨道上吗？还是有更好/更有效的方式？

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

这是我正在玩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/

Javascript通过未知深度对象迭代

1 个答案: