Json校验键值对是动态存在的

Question

我有这个数据

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

现在举个例子，当我点击一个按钮调用blood。它应该获取血液中的所有值。我已经做到了。但我将第一个值作为另一个数组。我想动态检查，直到所有的键值对变为空。如何找到数组并动态迭代，直到不存在数组键值对。我做了一个示例程序，以使事情变得清楚。

查看

Answer 1

我的想法是使用data-parent找到单击的li的所有父项，然后使用此父项链在data中找到选定（单击）的li条目，最后将找到的条目信息添加为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")) { ... }块用于检查该元素是否已被单击。如果被点击了，那么删除它的子菜单和它已经被点击的事实（类）
• CCD_ 13和CCD_。我所说的父元素是指元素（从顶部菜单级别），其中子菜单中单击的元素被显示
• 使用chain列表中的这些父元素，我们可以在data中找到被点击的元素（从data开始，在其中搜索parent1，然后在data[xx][parent1]中搜索parent2，以此类推，直到找到被点击元素信息（通过比较被点击元素ID和信息键）
• 当在data中找到点击的元素信息时，它被添加为元素子菜单。添加的工作原理与原始代码相同，只需再次对一个.append()进行小的修改即可获得更好的性能
• 最后，类selected被添加到被点击的元素，以注册元素已经被点击的事实（并且其子菜单被打开）