将层次化的jQuery文件转换为分层的JSON div

Question

如何循环两个父-子关系(在简单ID PKEY和FKEY上) JSON文件，并将它们显示为一个div列表，如下所示：

1. 层次结构-其中，子/FKEY div只出现在父/PKEY div下面(显示为父-子-子、父-子，等等)。
2. 可扩展-这些子/FKEY是display:none，直到您单击父/ PKEY；也就是说，当您使用jQuery的$(panelID).slideToggle(speed)方法单击PKEY时，项目会出现/消失。
3. 如果父div或子div中的最后一个键值对存在并具有key=“反推荐”，则可以使用单独的复选框div切换。
4. 很容易-开玩笑

jQuery为我提供了parseJSON和酷酷的显示功能，作为回报，我给了它可怕的JS调试技巧。

编辑:下面是两个有问题的JSON文件：

types.json:

{"objtype":[{"NAME":"Animal","ID":"15","DEPRECATED":""},{"NAME":"Vegetable","ID":"8"},{"NAME":"Mineral","ID":"2","DEPRECATED":""}]}

objs.json:

{"objinstance":[{"DATEBOUGHT":"2014-08-26 00:00:00.0","OBJTYPEID":"8","OBJNAME":"Fruit salad consisting of oranges and mangoes","OBJID":"454","DATEEXPIRES":"2014-09-01 00:00:00.0","DEPRECATED":""},{"DATEBOUGHT":"2014-08-26 00:00:00.0","OBJTYPEID":"8","OBJNAME":"Spicy V-8 juice","OBJID":"499","DATEEXPIRES":"2015-01-02 00:00:00.0"},{"DATEBOUGHT":"2014-08-26 00:00:00.0","OBJTYPEID":"2","OBJNAME":"Rental agreement for new apartment","OBJID":"2885","DATEEXPIRES":"2015-08-25 00:00:00.0"},{"DATEBOUGHT":"2014-08-26 00:00:00.0","OBJTYPEID":"2","OBJNAME":"Salt","OBJID":"1033","DATEEXPIRES":"","DEPRECATED":""},{"DATEBOUGHT":"","OBJTYPEID":"15","OBJNAME":"Koko the Monkey","OBJID":"68","DATEEXPIRES":"","DEPRECATED":""},{"DATEBOUGHT":"","OBJTYPEID":"15","OBJNAME":"Bubbles the Clown","OBJID":"69","DATEEXPIRES":"","DEPRECATED":""}]}

Answer 1

下面是一个非常简单的示例，说明如何根据JSON中的数据生成HTML标记。

算法

1. 将JSON字符串解析为Javascript对象
2. 迭代父数据
3. 对于每个父数据，创建父div并向其添加所需的内容。
4. 迭代子数据，搜索常见的id
5. 对于与父id匹配的每个子数据，创建子div，向其子数据中添加所需的内容，最后附加到父div中。
6. 将父div追加到容器或主体
7. 冲洗，泡沫，重复
8. 根据您的口味创建CSS样式

。

演示Fiddle: http://jsfiddle.net/abhitalks/h3nbwc1f/

片段

​

var typesString = '{"objtype":[{"NAME":"Animal","ID":"15","DEPRECATED":""},{"NAME":"Vegetable","ID":"8"},{"NAME":"Mineral","ID":"2","DEPRECATED":""}]}';
var objsString = '{"objinstance":[{"DATEBOUGHT":"2014-08-26 00:00:00.0","OBJTYPEID":"8","OBJNAME":"Fruit salad consisting of oranges and mangoes","OBJID":"454","DATEEXPIRES":"2014-09-01 00:00:00.0","DEPRECATED":""},{"DATEBOUGHT":"2014-08-26 00:00:00.0","OBJTYPEID":"8","OBJNAME":"Spicy V-8 juice","OBJID":"499","DATEEXPIRES":"2015-01-02 00:00:00.0"},{"DATEBOUGHT":"2014-08-26 00:00:00.0","OBJTYPEID":"2","OBJNAME":"Rental agreement for new apartment","OBJID":"2885","DATEEXPIRES":"2015-08-25 00:00:00.0"},{"DATEBOUGHT":"2014-08-26 00:00:00.0","OBJTYPEID":"2","OBJNAME":"Salt","OBJID":"1033","DATEEXPIRES":"","DEPRECATED":""},{"DATEBOUGHT":"","OBJTYPEID":"15","OBJNAME":"Koko the Monkey","OBJID":"68","DATEEXPIRES":"","DEPRECATED":""},{"DATEBOUGHT":"","OBJTYPEID":"15","OBJNAME":"Bubbles the Clown","OBJID":"69","DATEEXPIRES":"","DEPRECATED":""}]}';

var types = JSON.parse(typesString);
var objs = JSON.parse(objsString);

types.objtype.forEach(function(item, idx) {
    var $parent = $("<div class='parent' />");
    var $label = $("<label>").text(item.ID + ': ' + item.NAME).attr('for', 'c' + idx);
	var $input = $('<input type="checkbox">').attr('id', 'c' + idx);
	$parent.append($label);
    $parent.append($input);
    objs.objinstance.forEach(function(item2) {
        if (item2.OBJTYPEID == item.ID) {
            var $child = $("<div class='child' />");
            var txt2 = item2.OBJID + ': ' + item2.OBJNAME;
            $child.text(txt2);
            $parent.append($child);
        }
    });
    $("#wrap").append($parent);
});

div#wrap {
    font-family: helvetica, sans-serif;
    font-size: 17px;
}
div.parent {
    border: 1px solid blue;
    padding: 8px; margin: 4px;
}
div.child {
    border: 1px solid green;
    font-size: 15px;
    padding: 0px; margin: 0px;
    opacity: 0; height: 0px;
    transition: all 250ms;
}
label {
    cursor: pointer;
}
input[type=checkbox] {
    display: none;
}
input[type=checkbox]:checked  ~ div.child {
    padding: 8px; margin: 8px;
    opacity: 1; height: auto;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap"></div>

​