Example tutorial for using each loop nesting in Jquery

1. The JSON data returned from MVC is as follows:

2. The following is an example of a client implementation:

$.post ("/admin/getpermissionsforrole",function(data,status) {if(Status = = "Success") {    varghtml = ""; $.each (data,function(I, items) {//items are equivalent to each one-dimensional array in a two-D array        if(items["Parentpermissionid"] = = "") {ghtml+ = "<div class= ' Panel panel-transparent ' > <ul class= ' list-group ' >"; Ghtml+ = "<div class= ' panel-heading ' ><i class= ' fa fa-list-ul ' ></i>&nbsp;<span class= ' panel-title Text-bold ' > "+ items[" permissionname "] +" </span></div> "; Ghtml+ = "<ul class= ' List-group ' >"; $.each (data,function(i, sitems) {if(sitems["Parentpermissionid"] = = items["PermissionID"]) {ghtml+ = "<li class= ' List-group-item ' >"; Ghtml+ = "
; Ghtml+ = "<label class= ' px-single ' ><input type= ' checkbox ' class= ' px ' ><span class= ' lbl ' >&nbsp;</ span></label>&nbsp;&nbsp; "+ sitems[" Permissionname "]; Ghtml+ = "; Ghtml+ = "<p>"; $.each (data,function(i, ssitems) {if(ssitems["Parentpermissionid"] = = sitems["PermissionID"]) {ghtml+ = "<label class= ' checkbox ' ><input type= ' checkbox ' class= ' px '/><span class= ' lbl ' >" + ssitems[" Permissionname "]+" </span></label> "; }}) ghtml+ = "</p>"; Ghtml+ = "</li>"; }}) ghtml+ = "</ul></div>";                        }    }); $("#premlist"). HTML (ghtml); }})

3, the final effect to achieve the following:

Example tutorial for using each loop nesting in Jquery