在JSON或Javascript对象中递归搜索

例如：

[{
    id:'our-purpose',
    title:'Our Purpose',
    slug:'/our-purpose',
    backgroundImage:'images/bg-our-purpose.jpg',
    showInNav:1
  },
  {
    id:'our-people',
    title:'Our People',
    slug:'/our-people',
    backgroundImage:'images/bg-our-people.jpg',
    showInNav:1,
    subpages:[
      {
        id:'attorneys',
        title:'Attorneys',
        slug:'/our-people/attorneys',
        subpages:[
          {
            id:'attorneys-cdb',
            title:'Attorneys - Carla DeLoach Bryant',
            slug:'/our-people/attorneys/carla'
          },
          {
            id:'attorneys-jad',
            title:'Attorneys - Jordan A. DeLoach',
            slug:'/our-people/attorneys/jordan'
          },
          {
            id:'attorneys-shh',
            title:'Attorneys - Sarah H. Hayford',
            slug:'/our-people/attorneys/sarah'
          },
          {
            id:'attorneys-jsp',
            title:'Attorneys - Jason S. Palmisano',
            slug:'/our-people/attorneys/jason'
          },
          {
            id:'attorneys-ldw',
            title:'Attorneys - Lindsey DeLoach Wagner',
            slug:'/our-people/attorneys/carla'
          },
        ]
      },
      {
        id:'legal-support',
        title:'Legal Support',
        slug:'/our-people/legal-support',
        subpages:[
          {
            id:'legal-support-tb',
            title:'Legal Support - Theolyn Brock',
            slug:'/our-people/attorneys/theolyn'
          },
          {
            id:'legal-support-cd',
            title:'Legal Support - Cheri DeFries',
            slug:'/our-people/attorneys/cheri'
          },
        ]
      },
 //...and so on

您会注意到，您可以执行

json[1]。子页面[0]。子页面[0]

，但我不知道它会有多深。这是由我的一个设计师客户为他为客户创建的AJAX站点编写的。我正在尝试生成一个导航，并且需要能够：

A.递归地解析此项以构建导航（

…

）

B.搜索匹配的id。像这样（但这不是递归的）[并且忽略

中的
，这只是为了举例）

以下是一个开始（JavaScript和伪代码的混合）：

以下是一个开始（JavaScript和伪代码的混合）：

此代码为您构建导航：

function buildNavForNode(node) {
  var result = "<li id='" + node.id + "'><a href='" + node.slug + "'>" + node.title + "</a>";
  if(node.subpages == undefined) {
    return result + "</li>";
  } else {
    return result + buildNavForNodes(node.subpages) + "</li>";
  }
}


function buildNavForNodes(nodes) {
  var result = "<ul>";
  var i = 0;
  var len = nodes.length;
  for(; i < len; i++) {
    result += buildNavForNode(nodes[i]);
  }
  return result + "</ul>";
}

使用递归函数可以很容易地做到这一点，但我认为这很好地描述了如何处理页面集合和处理单个页面本身之间的职责分离。
此代码为您构建nav：

function buildNavForNode(node) {
  var result = "<li id='" + node.id + "'><a href='" + node.slug + "'>" + node.title + "</a>";
  if(node.subpages == undefined) {
    return result + "</li>";
  } else {
    return result + buildNavForNodes(node.subpages) + "</li>";
  }
}


function buildNavForNodes(nodes) {
  var result = "<ul>";
  var i = 0;
  var len = nodes.length;
  for(; i < len; i++) {
    result += buildNavForNode(nodes[i]);
  }
  return result + "</ul>";
}

使用递归函数可以很容易地做到这一点，但我认为这很好地描述了如何处理页面集合和处理单个页面本身之间的职责分离。
我会尝试一下，因为你可以找到代码。
我会尝试一下，因为你可以找到代码。
我生成了导航使用此代码，因为我只需要第一级：

$('#sidebar').append('<ul></ul>');

for(x in PAGES){
  if(PAGES[x].showInNav == 1){
    $('#sidebar > ul').append('<li data-id="'+PAGES[x].id+'"><a href="#!'+PAGES[x].slug+'">'+PAGES[x].title+'</a></li>');
    if(PAGES[x].subpages){
      $('#sidebar > ul > li:last').append('<ul></ul>');
      for(y in PAGES[x].subpages){
        $('#sidebar > ul > li:last > ul').append('<li data-id="'+PAGES[x].subpages[y].id+'"><a href="#!'+PAGES[x].subpages[y].slug+'">'+PAGES[x].subpages[y].title+'</a></li>');
      }
    }
  }
}

我用这段代码生成导航，因为我只需要第一级：

$('#sidebar').append('<ul></ul>');

for(x in PAGES){
  if(PAGES[x].showInNav == 1){
    $('#sidebar > ul').append('<li data-id="'+PAGES[x].id+'"><a href="#!'+PAGES[x].slug+'">'+PAGES[x].title+'</a></li>');
    if(PAGES[x].subpages){
      $('#sidebar > ul > li:last').append('<ul></ul>');
      for(y in PAGES[x].subpages){
        $('#sidebar > ul > li:last > ul').append('<li data-id="'+PAGES[x].subpages[y].id+'"><a href="#!'+PAGES[x].subpages[y].slug+'">'+PAGES[x].subpages[y].title+'</a></li>');
      }
    }
  }
}

我在这里看不到问题。你似乎明白你需要怎么做…？哈，我不知道如何递归我在这里看不到问题。你似乎明白你需要怎么做…？哈，我不知道怎么做recursive@icktoofay，true，但该函数无论如何都应该工作。正在运行
JSON.stringify（matchId（'foo'，[{x:{id:'foo'，arr:[1,2,3]}]）
在products
{id:“foo”，“arr:[1,2,3]}
对于meOh，我忘记了[]==“object”的类型
。对不起。@icktoofay，是的。
typeof
让人困惑。有一些关于该语言新版本的建议可以让它更清晰：但IIRC没有一个涉及数组。我的feed:--谢谢，它让我走上了正确的轨道，到目前为止我已经写了这个：但是当我写的时候，让我们说：
var thePage=matchId（'id'，'attorneys-cdb'）；console.log（thePage.slug）；
I get
Uncaught TypeError:无法读取未定义的属性'slug'
Nevermind.dumby error.忘记了递归部分中的
.subpage
）@icktoofay，true，但该函数无论如何都应该工作。运行
JSON.stringify（matchId（'foo'，[{.x:{id:'foo'，arr:[1,2,3]}}]）
在products
{id:“foo”，“arr:[1,2,3]}
对于meOh，我忘记了
类型[]==“object”
。对不起。@icktoofay，是的。
typeof
让人困惑。有一些关于该语言新版本的建议可以让它更清晰：但IIRC没有一个涉及数组。我的feed:--谢谢，它让我走上了正确的轨道，到目前为止我已经写了这个：但是当我写的时候，让我们说：
var thePage=matchId（'id'，'attorneys-cdb'）；console.log（thePage.slug）；
I get
Uncaught TypeError:无法读取未定义的属性'slug'。
Nevermind.dumby error.忘记了递归部分内的
。子页面
）请注意，

中的每个…的

都是Mozilla独有的。它不是ECMAScript的一部分。@patrick:我甚至不知道它是有效的JavaScript。我说它是伪代码…啊，我以为你在引用：请注意，

中的每个…的

都是Mozilla独有的。它不是ECMAScript的一部分。@patrick:我甚至不知道它是虚拟的lid JavaScript。我说这是伪代码……啊，我以为你在引用：JSONPath似乎只返回匹配项的数组，而不是匹配对象？我可能用错了tho。JSONPath似乎只返回匹配项的数组，而不是匹配对象？我可能用错了tho。看起来很接近，但这是我的完整提要：代码在我们的人之后停止，列出了它的子页面，但这是我的完整提要：代码在我们的人之后停止，列出了它的子页面
var testData = [
  {
    id:'our-purpose',
    title:'Our Purpose',
    slug:'/our-purpose',
    backgroundImage:'images/bg-our-purpose.jpg',
    showInNav:1
  },
  {
    id:'our-people',
    title:'Our People',
    slug:'/our-people',
    backgroundImage:'images/bg-our-people.jpg',
    showInNav:1,
    subpages:[
      {
        id:'attorneys',
        title:'Attorneys',
        slug:'/our-people/attorneys',
        subpages:[
          {
            id:'attorneys-cdb',
            title:'Attorneys - Carla DeLoach Bryant',
            slug:'/our-people/attorneys/carla'
          },
          {
            id:'attorneys-jad',
            title:'Attorneys - Jordan A. DeLoach',
            slug:'/our-people/attorneys/jordan'
          },
          {
            id:'attorneys-shh',
            title:'Attorneys - Sarah H. Hayford',
            slug:'/our-people/attorneys/sarah'
          },
          {
            id:'attorneys-jsp',
            title:'Attorneys - Jason S. Palmisano',
            slug:'/our-people/attorneys/jason'
          },
          {
            id:'attorneys-ldw',
            title:'Attorneys - Lindsey DeLoach Wagner',
            slug:'/our-people/attorneys/carla'
          },
        ]
      },
      {
        id:'legal-support',
        title:'Legal Support',
        slug:'/our-people/legal-support',
        subpages:[
          {
            id:'legal-support-tb',
            title:'Legal Support - Theolyn Brock',
            slug:'/our-people/attorneys/theolyn'
          },
          {
            id:'legal-support-cd',
            title:'Legal Support - Cheri DeFries',
            slug:'/our-people/attorneys/cheri'
          },
        ]
      }
    ]
  }
];

$(function(){
  htmlToInsert = buildNavForNodes(testData);
  console.log(htmlToInsert);
  $('body').html(htmlToInsert);
});

$('#sidebar').append('<ul></ul>');

for(x in PAGES){
  if(PAGES[x].showInNav == 1){
    $('#sidebar > ul').append('<li data-id="'+PAGES[x].id+'"><a href="#!'+PAGES[x].slug+'">'+PAGES[x].title+'</a></li>');
    if(PAGES[x].subpages){
      $('#sidebar > ul > li:last').append('<ul></ul>');
      for(y in PAGES[x].subpages){
        $('#sidebar > ul > li:last > ul').append('<li data-id="'+PAGES[x].subpages[y].id+'"><a href="#!'+PAGES[x].subpages[y].slug+'">'+PAGES[x].subpages[y].title+'</a></li>');
      }
    }
  }
}

var matchKey = function(k,v,j){  
  k = k || 'id';  //key
  v = v || '';    //value
  j = j || PAGES; //json
  for(x in j){
    if(j[x][k] == v){
      return j[x];
    }
    if(j[x].subpages){
      var result = matchKey(k,v,j[x].subpages);
      if(result !== undefined){
        return result;
      }
    }
  }
}