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

我的想法是找到所有使用li点击data-parent的父母，然后使用此父母链在li中找到所选的（点击的）data条目，最后，将找到的条目信息添加为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，然后搜索{{1}在parent2中等等，直到找到点击的元素信息（通过比较点击的元素ID和信息键）。
在data[xx][parent1]中找到点击的元素信息时，会将其添加为元素子菜单。添加原始代码中的作品，只需要再修改一个data，以获得更好的性能。
最后，将class .append()添加到clicked元素中，以注册已单击元素的事实（并打开其子菜单）。

Json检查键值对动态存在

1 个答案: