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>...）一致するidのための

B.検索を構築するために再帰的にこれを解析します。 ）この（これは再帰的ではありません）のような[と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を試してみると、コードhereが見つかります。

Answer 5

私は最初のレベルのみたかったので、私はこのコードのNAVを生成：次に

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