JSONからメニューを作成する

Question

jQueryを使用してJSONリクエストを呼び出してメニューを作成することで、その場で作成された動的メニューを作成しようとしています。一例として

<ul class="menu"> 
    <li> 
     <a href="/Organisations/201/NewJournalEntry" title="New Journal Entry"> 
      <span class="icon journal-new">New Journal Entry</span> 
     </a> 
    </li> 
    <li> 
     <a href="/Organisations/201/People" title="View People"> 
      <span class="icon people">People</span> 
     </a> 
    </li> 
    <li class="sep"> 
     <a href="/Organisations/201/Edit" title="Edit"> 
      <span class="icon edit">Edit</span> 
     </a> 
    </li> 
</ul> 

と、次のJSON：：私は、次の計画メニュー構造を持っている

{"menu": { 
    "id": "organisation-201", 
    "class": "menu", 
    "content": { 
    "menuitem": [ 
     {"text" : "New Journal Entry", "title" : "New Journal Entry", "href" : "/Organisations/201/NewJournalEntry", "liClass" : "", "icon" : "icon journal-new" }, 
     {"text" : "View People", "title" : "View People", "href" : "/Organisations/201/People", "liClass" : "", "icon" : "icon people" }, 
     {"text" : "Edit", "title" : "Edit", "href" : "/Organisations/201/Edit", "liClass" : "sep", "icon" : "icon edit" } 
    ] 
    } 
}} 

これを実行するための最良の方法だろうか？照会されるURLは '/ MenuBuilder/organization-201.json`のようなものになります

私は$ .getJSONメソッドを見ましたが、それは正しいものですか？誰もが... ..

$(document).ready(function() { 

       // First we connect to the JSON file 
       $.getJSON('menu.json', function(data) 
       { 
        // Setup the items array 
        var items = []; 
        // For each line of data 
        $.each(data, function(key, val) 
        { 
         items.push('<li class="' + liClass + '"><a href="' + href + '"><span class="' + icon +'">' + text + '</span></a></li>'); 
        }); 

        $('<ul/>', { 
         html: items.join('') 
        }).appendTo('#buildHere'); 

       }); 

       // END json 

      }); 

Answer 1

$.getJSON実際に行く方法です。あなたはそれを変換を心配せずにDOM要素にそれを回すためにあなたのコードを書くことができるようにsuccessコールバックは、JavaScriptのオブジェクトとして、既にあなたにデータを提供します：

$.getJSON('/MenuBuilder/organisation-201.json',{},function(data) { 
    var ul = $("<ul/>") 
     .attr("id",data.menu.id) 
     .addClass(data.menu.class); 
    $.each(data.menu.content.menuitem, function() { 
     var li = $("<li/>") 
      .appendTo(ul) 
      .addClass(this.liClass); 
     var a = $("<a/>") 
      .appendTo(li) 
      ... 
    }); 
}); 

か、を手動で要素を作成することはあまりにも多くの仕事である場合あなたはRody van Sambeekのようないくつかのテンプレートプラグインを見ることができます。まだ使用していないので、私は何も指示することはできません。

注：上記の私の例は、効率性ではなく、わかりやすさと可読性を重視したものです。通常、それが問題になることはありませんが、それは遅すぎるが終わると、あなたが最適化する必要がある場合は、それを行うの推奨される方法は、Array.joinを使用して、大きな文字列をマウントし、一度に$()を呼び出すことです：

var html = ['<ul id="', data.menu.id, '" class="', data.menu.class, '">']; 
// Keep adding elements to html as strings 
// ... 
html.push('</ul>'); 
var ul = $(html.join('')); 

Answer 2

を感謝

これは私がこれまで試したものですが提案など、あるいはより良い例を提供することができますはい、あなたは間違いなく$ .getJSON方法や手書きの$を使用することができますJQueryの.ajaxメソッド

javascriptからメニューを生成するには、ある種のテンプレートメカニズムを使用することを検討する必要があります。 JSRender https://github.com/BorisMoore/jsrenderまたは別のJQueryテンプレートエンジンを使用できます。

私は個人的には、テンプレートエンジンのビルドを持つKnockoutJS http://knockoutjs.com/が好きです。しかし、それはjavascriptのテンプレートよりもはるかに多くを提供しています。