javascript - JSONまたはJavascriptオブジェクトを再帰的に検索する

Question

例えば：

[{
    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].subpages[0].subpages[0]、しかし私はそれがどれほど深くなるかわかりません。これは、彼がクライアントのために構築しているAJAXサイトのために私のデザイナークライアントによって書かれています。とりわけナビゲーションを生成しようとしていますが、次のことができる必要があります。

A.これを再帰的に解析して、ナビゲーションを作成します（<ul><li><a>...）

B.一致するIDを検索します。このように（ただし、これは再帰的ではありません）[そして無視してくださいfor...in、それはほんの一例です）

var matchId(id,json){
  for(x in json){
    if(json[x].id == id){ var theMatch = json[x]; break; }
  }
}

Answer 1

このコードはあなたのためにナビゲーションを構築します：

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

使用方法は次のとおりです。

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

これは再帰関数を使用して非常に簡単に実行できますが、これは、ページのコレクションをどう処理するかを理解することと、単一のページ自体を処理することの間の職務の分離をうまく描写していると思います。

Answer 2

これが始まりです（JavaScriptと擬似コードのいくつかの組み合わせで）：

function createMenu(data) {
    create UL
    for each item in data {
        create LI for item in UL
        if the item has subpages {
            append createMenu(item.subpages) to the LI
        }
    }
    return UL
}

function findByID(data, id) {
    for each item in data {
        if(item.id==id) {
            return the item
        }
        if item has subpages {
            if findByID(item.subpages, id) is not null, return the result
        }
    }
    return null;
}

Answer 3

function matchId(id, json){
  if (!(json && "object" === typeof json)) { return; }
  if (json.id === id) { return json; }
  for (var x in json){
    if (Object.hasOwnProperty.call(json, x)) {
      var result = matchId(id, json[x]);
      if (result !== undefined) { return result; }
    }
  }
}

Answer 4

ここでコードを見つけることができるJSONPathを試してみます。

Answer 5

最初のレベルだけが必要だったので、このコードでナビゲーションを生成しました。

$('#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;
      }
    }
  }
}