的Json檢查鍵值對存在動態

Question

我有這樣的數據

"Vitals":[ 
    { 
    "Bp Systolic":"", 
    "Bp Diastolic":"", 
    "Weight":"", 
    "Height":"", 
    "BMI":"" 
    } 
    ], 
    "Lab":[ 
    { 
    "Lipid_profile":[{ 
     "Total Cholestrol":"", 
     "TRIGLYCERIDES":"" 
     }], 
    "blood":[{ 
     "A1C":[{"asd":""}], 
     "ALBUMIN":"", 
     "CALCIUM":"", 
     "Glucose":"", 
     "POTTASIUM":"" 
    }] 
    }] 
    }; 

現在，例如當我點擊一個按鈕調用血液。它應該獲得血液中的所有值。我已經這樣做了。但我有第一個值作爲另一個數組。我想動態檢查，直到全部變成空鍵值對。我怎樣才能找到數組並動態地遍歷它，直到不存在數組鍵值對。我已經完成了示例程序來說明問題。

Check this out

Answer 1

我的想法是使用data-parent，然後用這個鏈條的父母找到點擊li的所有家長找到選擇（點擊）在datali進入，並最終增加找到的條目信息作爲li子菜單。

另外我添加了關閉（實際上，刪除）第二個li點擊子菜單。

Fiddle。

var data = 
{ 
    ... 
}; 

var html = ""; 
$.each(data, function(key, value) 
{ 
    html += '<li id="' + key + '">' + key + '</li>'; 
}); 
$('#list').append(html); 

$("#list").on('click', 'li', function() 
{ 
    var jThis = $(this); 
    if (jThis.hasClass("selected")) //close sub-menu on second click 
    { 
     jThis.find('ul').remove(); 
     jThis.removeClass('selected'); 
     return false; 
    } 
    var section = this.id; 
    var parent = jThis.data('parent'); 
    var chain = [section]; 
    while (parent) //searching full chain of parents up to data 
    { 
     chain.push(parent); 
     parent = $('#' + parent).data('parent'); 
    } 
    var selectedValue = [data]; 
    for (var i = chain.length - 1; i >= 0; i--) //searching selected(clicked) element in data 
    { 
     var found = false; 
     $.each(selectedValue, function(o_key, o_val) 
     { 
      $.each(o_val, function(i_key, i_val) 
      { 
       if (i_key == chain[i]) 
       { 
        selectedValue = i_val; 
        found = true; 
        return false; 
       } 
      }); 
      if (found) 
      { 
       return false; 
      } 
     }); 
    } 
    var html = "<ul>"; // adding sub-menu 
    $.each(selectedValue, function(o_key, o_val) 
    { 
     $.each(o_val, function (i_key, i_val) 
     { 
      html += '<li id="' + i_key + '" data-parent="' + section + '">' + i_key + '</li>'; 
     }); 
    }); 
    html += "</ul>"; 
    jThis.append(html); 
    jThis.addClass('selected'); // registering first click 
    return false; 
}); 

更新。充分的解釋：

• 增加一級li到#list是足夠清晰的 - 我只是修改了它一點點更好更流暢。
• $("#list").on('click', 'li'是添加事件處理程序（靜態元素#list而不是document）更合適的方法。
• if (jThis.hasClass("selected")) { ... }塊用於檢查此元素是否已被點擊。如果被點擊 - 然後刪除它的子菜單和它已被點擊的事實（類）。
• var chain = [section];和while (parent) { ... }用於形成所有單擊元素父項的列表。父母指的是元素（來自頂級菜單級別），其中呈現了子菜單點擊元素。
• 使用這些父母chain列表中，我們可以發現裏面data點擊的元素（由data出發，尋找在它parent1，然後直到點擊的元素信息中發現尋找在data[xx][parent1]parent2等（通過點擊的元素ID與比較信息鍵）。
• 當點擊的元素信息在data發現，它被添加爲元素的子菜單。增加作品的原代碼，只有小的修改只有一個.append()一次更好更流暢。
• 最後添加類selected添加到元素註冊元素的事實y點擊（並打開其子菜單）。