解析数据以创建导航窗格 [英] Parsing data to create a navigation pane

问题描述

我有这样的XML响应： http://jsfiddle.net/ZeeHv/

I have this XML response: http://jsfiddle.net/ZeeHv/

我正在尝试使用转储中的信息创建这样的东西：

I'm trying to create something like this using the information from the dump:

<UL>
  <li>Academic
    <ul>
      <li>BM</li>
      <li>CMTTE</LI>
      <li>DM</li>
      <li>PM</li>
  </ul>
  </li>
</ul>
<ul>
  <li>ARCHIVE</li>
</UL>
<ul>
  <LI>ASSOCIATIONS
    <ul>
    <li>BM</li>
    <li>DM</LI>
    <li>PM</li>
    </ul>
  </LI>
</ul>

最后，XML可以为我提供所有网站和子站的列表：

In the end the XML can give me a list of all my sites and subsits:

https://hosted.demo.ca 
https://hosted.demo.ca/academic
https://hosted.demo.ca/academic/bm 
https://hosted.demo.ca/academic/cmtte 
https://hosted.demo.ca/academic/dm 
https://hosted.demo.ca/academic/pm 
https://hosted.demo.ca/archive 
https://hosted.demo.ca/associations 
https://hosted.demo.ca/associations/bm 
https://hosted.demo.ca/associations/dm 
https://hosted.demo.ca/associations/pm 

如何查看此信息并附加ul和li标签来创建网站导航菜单？

How can I go through this information and append ul and li tags to create a site navigation menu?

JS用于获取XML：

JS used to get XML:

function getAllSites(){
  $().SPServices({
    operation: "GetAllSubWebCollection",
    async: true,
      completefunc: function(xData, Status){
      $(xData.responseXML).find("Web").each(function(){
      console.log($(this).attr("Url"));
      });
    }
  });
}

推荐答案

一个简单的解决方案是根据链接的深度构建索引映射，深度由 url / 的数量决定>。

A simple solution would be to build a map of indexes based on the depth of the links, the depth is determined by the number of / in the url.

var map = {}; //init the map
for (var i = 0, l = webs.length; i < l; i++) {
  //we create a index for our links based on the depth of them by `/`
  var m = webs[i].attributes['Url'].value.substring(23, webs[i].attributes['Url'].value.length).split('/').length; 

  map[m] = map[m] || []; //make sure we leave alone the old values if there is none init with new array
  map[m].push(webs[i].attributes['Url'].value); //push new value to node
}
console.log(map);

console.log（map）; 将输出与此类似的对象：

console.log(map); will output an object similar to this:

{
    "1": ["https://hosted.demo.ca", "https://hosted.demo.ca/academic", "https://hosted.demo.ca/archive", ...],
    "2": ["https://hosted.demo.ca/academic/bm", "https://hosted.demo.ca/academic/cmtte", ...],
}

通过此，您可以创建元素列表。

From this you can create your list of elements.

这篇关于解析数据以创建导航窗格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！