navメニューに基づいてjson/mysqlコンテンツリストをロードするajax？

Question

私はリソースのリスト、または連絡先情報を各専門分野の多くが持っています。

左のナビゲーションメニューで、「専門分野」のリストを作成したいと思います。専門分野をクリックすると、関連する連絡先情報のリストがコンテンツ領域に表示されます。

私は初心者であり、これを達成するための正しい/最も効率的な方法を探しています。ここで

は、ソースデータがどのようになるかである

Table: people 
┌────┬────────────────────┬─────────┬───────────┐─────────┐ 
| id | specialty| name | phone | url  | address | 
├────┼────────────────────┼─────────┤───────────┐─────────┐ 
| 0 | One  | this  | blah | www.x.com | 123 a st 
| 1 | One  | that  | blah | www.x.com | 123 b st 
| 2 | One  | there | blah | www.x.com | 123 c st 
| 3 | Two  | the  | blah | www.x.com | 123 d st 
| 4 | Two  | other | blah | www.x.com | 123 e st 
└────┴────────────────────┴─────────┘───────────┘─────────┘ 

はここで基本的なレイアウトのJFIDDLEです（優れているCSV/JSON/mysqlの？）：JSFIDDLE

は、だから私は持っていますデータとレイアウトは完了しましたが、これが正しい（最も単純な）方法で実装されると完全に失われます。

すべてのヘルプは大歓迎です:)

Answer 1

は、ここで私はそれを行うだろうかだありがとう：

メニューHTMLは空でなければなりません（UL内部なしのli項目）、あなたはJSからそれを移植します。

旅行データ配列と異なる専門分野を取得：あなたはli要素を作成し、ULに追加し、各専門分野については

var specialties = [], x; 
for (x = 0; x < sampleData.length; ++x) 
{ 
    if ($.inArray(sampleData[x].specialty, specialties) < 0) 
     specialties.push(sampleData[x].specialty); 
} 

を。 、そのHTMLコードを

var ul = $("#menu"); 
    for (x = 0; x < specialties.length; ++x) 
    { 
    var li = $(document.createElement("li")); 
    li.addClass("list-group-item"); 
    li.attr("data-specialty", specialties[x]); 
    li.html(specialties[x]); 
    li.on("click", specialtyClicked); 
    ul.append(li); 
    } 

のonclick関数はデータ配列を移動し、その専門の専門家とHTMLを生成します。これはli要素は、カスタムデータの特殊属性に専門の名前を格納すると、onclickイベントが取り付けられていますその後、#contacts divの中に注入されています。私はそれはあなたがコードを見ると理解しやすいと思うhttps://jsfiddle.net/Lvq8a9me/8/：

function specialtyClicked() 
{ 
    // Remove active attribute from all menu items and add it to this one 
    $(".list-group-item").removeClass("active"); 
    $(this).addClass("active"); 

    // Get the specialty name 
    var specialty = $(this).attr("data-specialty"); 

    // Create the HTML for the specialists 
    var output = "<h2>" + specialty + "</h2><br/>"; 
    for (x = 0; x < sampleData.length; ++x) 
    { 
    var s = sampleData[x]; 
    if (s.specialty != specialty) 
     continue; 

    output += "<h4>" + s.name + "</h4><p>" + s.address + "<br/>" + s.phone + " - " + s.url + "</p>"; 
    } 
    $("#contacts").html(output); 
} 

はここで完全な作業にコメント例です。