Question

如何循环两个PARENT-CHILD关系（在简单ID PKEY和FKEY上）JSON文件并将它们显示为以下div的列表：

层次结构 - 其中child / FKEY div仅出现在父/ PKEY div下（显示为父子子，父子孩子等）
expandable - 这些子/ FKEY div为display:none，直到您单击父/ PKEY div为止;即，使用jQuery＆＃39; s $(panelID).slideToggle(speed)方法
能够使用单独的复选框div切换
sortable - Just Kidding

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标记。

<强> 算法：

将JSON字符串解析为Javascript对象
迭代父数据
对于每个父数据，请创建父div并将所需内容添加到其中。
迭代子数据，搜索常见的id
对于与父id匹配的每个子数据，创建子div，向其中添加所需内容，最后附加到父div
将父div附加到容器或正文
冲洗，起泡，重复
根据您的喜好创建CSS样式

演示小提琴：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>

将分层JSON文件转换为分层jQuery div

1 个答案: