jQuery中ajax的forEach循环

<button type="button" class="btn btn-info look" style="margin-right: 3px;" data-toggle="modal" data-target="#show">
	<input type="hidden" value="${role.role_id }">查看
</button>

<script type="text/javascript">
$(function() {
	$(".look").on("click", function() {
		var id = $(this).find("input").val();
		$.ajax({
			type: "post",
			url: "${pageContext.request.contextPath}/role?method=show&id=" + id,
			success: function(data){
				var menus = data.menus;
				$("#showId").html(data.role_id);
				$("#showName").html(data.role_name);
				$("#showDescription").html(data.role_description);
				var menuName = "";
				var html = "";
				/* $.each(menu, function(i, item){
					console.log(item.menu_name);
				}) */
				// 或
				menus.forEach(function(item, i){
					menuName += item.menu_name + " | ";
					if(item.menu_id == 1){
						// 实现对比数据，如果结果为true则默认勾选该多选框
						html += '<span class="checkbox"><label><input type="checkbox" name="menu_id" value="'+item.menu_id+'" checked>'+item.menu_name+'</label></span>';
					} else{
						// 实现对比数据，如果结果为false则不勾选该多选框
						html += '<span class="checkbox"><label><input type="checkbox" name="menu_id" value="'+item.menu_id+'">'+item.menu_name+'</label></span>';
					}
				})
				$("#hint").html(html);
				if (menuName.length > 0) { // 去除最后一个|和它两边的空格
					menuName = menuName.substr(0, menuName.length - 3);
				}
				$("#showMenuName").html(menuName);
				// 或
				/*
				$("#showMenuName").empty(); // 加入该代码则会在执行append之前会把文本域内容清空，不会使文本域内容累加
				$("#showMenuName").append(menuName); // 向文本域追加内容，如果不加上面一段代码empty()内容会一直累加
				*/
			},
			error: function(err){}
		})
	});
})
</script>

<div class="modal-content">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
		</button>
		<h4 class="modal-title">查看角色信息</h4>
	</div>
	<div class="modal-body">
		<form class="form-horizontal">
			<div class="form-group">
				<label class="col-sm-2 control-label">角色ID</label>
				<div class="col-sm-10">
					<div class="form-control" id="showId"></div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">角色名称</label>
				<div class="col-sm-10">
					<div class="form-control" id="showName"></div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">角色描述</label>
				<div class="col-sm-10">
					<div class="form-control" id="showDescription"></div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">权限列表</label>
				<div class="col-sm-10">
					<div class="form-control" id="showMenuName"></div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">权限ID</label>
				<div class="col-sm-10" id="hint">
					<div class="form-control" id="showMenuId"></div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">父级ID</label>
				<div class="col-sm-10">
					<div class="form-control" id="showMenuParentId"></div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">权限状态</label>
				<div class="col-sm-10">
					<span style="color: red;">1为可用,0为不可用</span>
					<div class="form-control" id="showMenuFlag"></div>
				</div>
			</div>
		</form>
	</div>
</div>