Как создать динамическое вложенное меню из объекта JSON?

Как создать динамическое вложенное меню из объекта json?

Меню строится за исключением раздела GroupName: Отчеты отдела занятости.

Я создаю первый подуровень с именем меню SubGroupName, проблема с добавлением информации отчетов под каждым из них. Таким образом, изображение показывает фрагмент меню. Мне нужно, чтобы каждый отчет отображался в пункте меню.

введите описание изображения здесь

Вот мой файл JSON

  [ { "GroupName": "Status Reports", "SubGroup": [ { "SubGroupName": "Status Reports", "Report": [ { "SidebarName": "Status Sales", "URL": "~/Reports/Status/StatusSales.aspx" }, { "SidebarName": "Status Balance", "URL": "~/Reports/Status/StatusBalance.aspx" }, { "SidebarName": "Status Reconciliation", "URL": "~/Reports/Status/StatusReconciliation.aspx" }, { "SidebarName": "Status Revenue Center Sales", "URL": "~/Reports/Status/StatusRevenueCenterSales.aspx" }, { "SidebarName": "Status Un-Attended Close Audit", "URL": "~/Reports/Status/StatusUnAttendedCloseAudit.aspx" } ] } ] }, { "GroupName": "Status Department Reports", "SubGroup": [ { "SubGroupName": "Status Department Reports", "Report": [ { "SidebarName": "Status Department Sales", "URL": "~/Reports/Status Department/Status DepartmentSales.aspx" }, { "SidebarName": "Status Department Sales by Class", "URL": "~/Reports/Status Department/Status DepartmentSalesByClass.aspx" }, { "SidebarName": "Status Department Sales by Zip Code", "URL": "~/Reports/Status Department/Status DepartmentSalesByZipCode.aspx" } ] } ] }, { "GroupName": "Item Department Reports", "SubGroup": [ { "SubGroupName": "Item Department Reports", "Report": [ { "SidebarName": "Item Department Sales", "URL": "~/Reports/Item Department/Item DepartmentSales.aspx" }, { "SidebarName": "Item Department Sales by Report Group", "URL": "~/Reports/Item Department/Item DepartmentSalesByReportGroup.aspx" }, { "SidebarName": "Item Department Sales by Report Group (Inventory Recipe)", "URL": "~/Reports/Item Department/Item DepartmentSalesByReportGroupInventoryRecipe.aspx" }, { "SidebarName": "Item Department Sales by Zip Code", "URL": "~/Reports/Item Department/Item DepartmentSalesByZipCode.aspx" }, { "SidebarName": "Item Department Sales by Quantity (UOM)", "URL": "~/Reports/Item Department/Item DepartmentSalesByQuantityUOM.aspx" }, { "SidebarName": "Item Department Movement", "URL": "~/Reports/Item Department/Item DepartmentMovement.aspx" } ] } ] }, { "GroupName": "Item Modifier Department Reports", "SubGroup": [ { "SubGroupName": "Item Modifier Department Reports", "Report": [ { "SidebarName": "Item Modifier Department Item Department Sales", "URL": "~/Reports/Item Modifier Department/Item Modifier DepartmentItem DepartmentSales.aspx" }, { "SidebarName": "Item Modifier Department Item Department Sales by Report Group", "URL": "~/Reports/Item Modifier Department/Item Modifier DepartmentItem DepartmentSalesByReportGroup.aspx" } ] } ] }, { "GroupName": "Discount Reports", "SubGroup": [ { "SubGroupName": "Discount Reports", "Report": [ { "SidebarName": "Coupon Summary", "URL": "~/Reports/Discount/CouponSummary.aspx" }, { "SidebarName": "Discount Summary", "URL": "~/Reports/Discount/DiscountSummary.aspx" }, { "SidebarName": "Discount Details", "URL": "~/Reports/Discount/DiscountDetails.aspx" }, { "SidebarName": "Discount by Group", "URL": "~/Reports/Discount/DiscountByGroup.aspx" } ] } ] }, { "GroupName": "Void Reports", "SubGroup": [ { "SubGroupName": "Void Reports", "Report": [ { "SidebarName": "Paid In-Out", "URL": "~/Reports/Void/PaidInOut.aspx" }, { "SidebarName": "Void Item Departments", "URL": "~/Reports/Void/VoidItem Departments.aspx" }, { "SidebarName": "Cancel Sales (Detail)", "URL": "~/Reports/Void/CancelSalesDetail.aspx" }, { "SidebarName": "Return Sales", "URL": "~/Reports/Void/ReturnSales.aspx" } ] } ] }, { "GroupName": "Sales Tax Reports", "SubGroup": [ { "SubGroupName": "Sales Tax Reports", "Report": [ { "SidebarName": "Sales Tax Summary", "URL": "~/Reports/SalesTax/SalesTaxSummary.aspx" }, { "SidebarName": "Sales Tax Status Detail", "URL": "~/Reports/SalesTax/SalesTaxStatusDetail.aspx" }, { "SidebarName": "Sales Tax Exempt Detail", "URL": "~/Reports/SalesTax/SalesTaxExemptDetail.aspx" } ] } ] }, { "GroupName": "Payment Detail Reports", "SubGroup": [ { "SubGroupName": "Payment Detail Reports", "Report": [ { "SidebarName": "Payment Details (All Payment Methods)", "URL": "~/Reports/PaymentDetails/PaymentDetailsAllPaymentMethods.aspx" }, { "SidebarName": "Payment Details (JBDev Express Payroll Deduction)", "URL": "~/Reports/PaymentDetails/PaymentDetailsJBDevExpressPayrollDeduction.aspx" }, { "SidebarName": "Employment Department Payroll Deduction Details", "URL": "~/Reports/PaymentDetails/Employment DepartmentPayrollDeductionDetails.aspx" }, { "SidebarName": "Captured Account Numbers (Misc Tender)", "URL": "~/Reports/PaymentDetails/CapturedAccountNumbersMiscTender.aspx" } ] } ] }, { "GroupName": "Employment Department Reports", "SubGroup": [ { "SubGroupName": "Employment Department Sale Reports", "Report": [ { "SidebarName": "Employment Department Sales", "URL": "~/Reports/Employment Department/Sales/Employment DepartmentSales.aspx" }, { "SidebarName": "Employment Department Sales Summary", "URL": "~/Reports/Employment Department/Sales/Employment DepartmentSalesSummary.aspx" }, { "SidebarName": "Employment Department Sales Detail", "URL": "~/Reports/Employment Department/Sales/Employment DepartmentSalesDetail.aspx" } ] }, { "SubGroupName": "Employment Department Labor Reports", "Report": [ { "SidebarName": "Employment Department Job Labor Cost", "URL": "~/Reports/Employment Department/Labor/Employment DepartmentJobLaborCost.aspx" }, { "SidebarName": "Employment Department Labor Summary (with Sales)", "URL": "~/Reports/Employment Department/Labor/Employment DepartmentLaborSummaryWithSales.aspx" }, { "SidebarName": "Employment Department Labor Summary (without Sales)", "URL": "~/Reports/Employment Department/Labor/Employment DepartmentLaborSummaryWithoutSales.aspx" }, { "SidebarName": "Employment Department Labor Detail (by Job)", "URL": "~/Reports/Employment Department/Labor/Employment DepartmentLaborDetailByJob.aspx" }, { "SidebarName": "Employment Department Labor Detail (by Job Class)", "URL": "~/Reports/Employment Department/Labor/Employment DepartmentLaborDetailByJobClass.aspx" }, { "SidebarName": "Employment Department Labor Detail (Jobs Combinded)", "URL": "~/Reports/Employment Department/Labor/Employment DepartmentLaborDetailJobsCombinded.aspx" }, { "SidebarName": "Employment Department Labor Break Detail", "URL": "~/Reports/Employment Department/Labor/Employment DepartmentLaborBreakDetail.aspx" } ] }, { "SubGroupName": "Employment Department Payroll Reports", "Report": [ { "SidebarName": "Employment Department Payroll Summary (ADP Web Based)", "URL": "~/Reports/Employment Department/Payroll/Employment DepartmentPayrollSummaryADPWebBased.aspx" }, { "SidebarName": "Employment Department Payroll Detail (ADP Web Based)", "URL": "~/Reports/Employment Department/Payroll/Employment DepartmentPayrollDetailADPWebBased.aspx" }, { "SidebarName": "Employment Department Payroll Export (ADP)", "URL": "~/Reports/Employment Department/Payroll/Employment DepartmentPayrollExportADP.aspx" }, { "SidebarName": "Employment Department Payroll Deduction Export", "URL": "~/Reports/Employment Department/Payroll/Employment DepartmentPayrollDeductionExport.aspx" } ] }, { "SubGroupName": "Employment Department Payment Detail", "Report": [ { "SidebarName": "Employment Department Payment Detail", "URL": "~/Reports/Employment Department/Misc/Employment DepartmentPaymentDetail.aspx" } ] }, { "SubGroupName": "Employment Department No Sale Detail", "Report": [ { "SidebarName": "Employment Department No Sale Detail", "URL": "~/Reports/Employment Department/Misc/Employment DepartmentNoSaleDetail.aspx" } ] } ] }, { "GroupName": "Inventory Reports", "SubGroup": [ { "SubGroupName": "Inventory Reports", "Report": [ { "SidebarName": "Inventory QOH", "URL": "~/Reports/Inventory/InventoryQOH.aspx" }, { "SidebarName": "Inventory QOH (Active)", "URL": "~/Reports/Inventory/InventoryQOHActive.aspx" }, { "SidebarName": "Perpetual Inventory (Count)", "URL": "~/Reports/Inventory/PerpetualInventoryCount.aspx" }, { "SidebarName": "Perpetual Inventory ($ Dollar)", "URL": "~/Reports/Inventory/PerpetualInventoryDollar.aspx" }, { "SidebarName": "Inventory Variance", "URL": "~/Reports/Inventory/InventoryVariance.aspx" }, { "SidebarName": "Inventory Adjustment Audit", "URL": "~/Reports/Inventory/InventoryAdjustmentAudit.aspx" }, { "SidebarName": "Inventory Recieve Audit", "URL": "~/Reports/Inventory/InventoryRecieveAudit.aspx" }, { "SidebarName": "Inventory Physical Audit", "URL": "~/Reports/Inventory/InventoryPhysicalAudit.aspx" }, { "SidebarName": "Inventory Physical Worksheet", "URL": "~/Reports/Inventory/InventoryPhysicalWorksheet.aspx" }, { "SidebarName": "Inventory Item Department List by Vendor", "URL": "~/Reports/Inventory/InventoryItem DepartmentListByVendor.aspx" } ] } ] }, { "GroupName": "Aggregate Reports", "SubGroup": [ { "SubGroupName": "Aggregate Reports", "Report": [ { "SidebarName": "Communication Status Report", "URL": "~/Reports/Enterprise/CommunicationStatusReport.aspx" }, { "SidebarName": "Status Sales Report", "URL": "~/Reports/Enterprise/StatusSalesReport.aspx" }, { "SidebarName": "Status Department Sales Report", "URL": "~/Reports/Enterprise/Status DepartmentSalesReport.aspx" }, { "SidebarName": "Coupon Summary Report", "URL": "~/Reports/Enterprise/CouponSummaryReport.aspx" }, { "SidebarName": "Discount Report", "URL": "~/Reports/Enterprise/DiscountReport.aspx" }, { "SidebarName": "Item Department Sales Report", "URL": "~/Reports/Enterprise/Item DepartmentSalesReport.aspx" }, { "SidebarName": "Item Department Group Sales Report", "URL": "~/Reports/Enterprise/Item DepartmentGroupSalesReport.aspx" } ] } ] }, { "GroupName": "Cash Drawer Sales", "SubGroup": [ { "SubGroupName": "Cash Drawer Sales", "Report": [ { "SidebarName": "Cash Drawer Sales", "URL": "~/Reports/Misc/CashDrawerSales.aspx" } ] } ] }, { "GroupName": "Report Groups Sales", "SubGroup": [ { "SubGroupName": "Report Groups Sales", "Report": [ { "SidebarName": "Report Group Sales", "URL": "~/Reports/Misc/ReportGroupSales.aspx" } ] } ] }, { "GroupName": "Hourly Sales", "SubGroup": [ { "SubGroupName": "Hourly Sales", "Report": [ { "SidebarName": "Hourly Sales", "URL": "~/Reports/Misc/HourlySales.aspx" } ] } ] }, { "GroupName": "Advanced Orders", "SubGroup": [ { "SubGroupName": "Advanced Orders", "Report": [ { "SidebarName": "Advanced Orders", "URL": "~/Reports/Misc/AdvancedOrders.aspx" } ] } ] }, { "GroupName": "Elecronic Journal", "SubGroup": [ { "SubGroupName": "Elecronic Journal", "Report": [ { "SidebarName": "Electronic Journal", "URL": "~/Reports/Misc/ElectronicJournal.aspx" } ] } ] } ] 

Мой код JavaScript / JQuery

Blockquote

 function LoadSideBar(data) { var li = $('{amp}lt;li{amp}gt;{amp}lt;a class="w3-bar-item w3-button w3-padding activeMenuTab" href="../Dashboard.aspx"{amp}gt;{amp}lt;i class="fas fa-th"{amp}gt;{amp}lt;/i{amp}gt;{amp}lt;span{amp}gt;Dashboard{amp}lt;/span{amp}gt;{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt;'); li.appendTo($('.w3-bar-block')); var previousGroupName = ""; var previousSubGroupName = ""; var previousName = ""; $.each(data, function (g, group) { var $groupName = group.GroupName; $.each(group.SubGroup, function (s, subgroup) { var $subGroupName = subgroup.SubGroupName; var ul = $('{amp}lt;ul class="w3-hide sub-menu"{amp}gt;{amp}lt;/ul{amp}gt;'); var a = $('{amp}lt;li{amp}gt;{amp}lt;a class="w3-bar-item w3-button" herf=""{amp}gt;{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt;'); $.each(subgroup.Report, function (r, report) { var $reportName = report.SidebarName; if ($groupName === $subGroupName {amp}amp;{amp}amp; $groupName === $reportName) { a = $('{amp}lt;li{amp}gt;{amp}lt;a class="w3-bar-item w3-button" herf ="'   report.URL   '"{amp}gt;'   report.SidebarName   '{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt;'); a.appendTo($('.w3-bar-block')); } else if ($groupName !== $subGroupName) { if (previousGroupName === "") { previousGroupName = $groupName; li = $('{amp}lt;li{amp}gt;{amp}lt;a class="3-bar-item w3-button"{amp}gt;'   $groupName   '{amp}lt;i class="fas fa-caret-down rotate"{amp}gt;{amp}lt;/i{amp}gt;{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt;'); for (i = 0; i {amp}lt; group.SubGroup.length; i  ) { a = $('{amp}lt;li{amp}gt;{amp}lt;a class="3-bar-item w3-button"{amp}gt;'   group.SubGroup[i].SubGroupName   '{amp}lt;i class="fas fa-caret-down"{amp}gt;{amp}lt;/i{amp}gt;{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt;'); a.appendTo(ul); debugger; var reportNames = group.SubGroup[i].Report; for (j = 0; j {amp}lt; reportNames.length; j  ) { a = $('{amp}lt;li{amp}gt;{amp}lt;a class="w3-bar-item w3-button" herf ="'   reportNames[j].URL   '"{amp}gt;'   reportNames[j].SidebarName   '{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt;'); } } } }else { li = $('{amp}lt;li{amp}gt;{amp}lt;a class="3-bar-item w3-button"{amp}gt;'   $subGroupName   '{amp}lt;i class="fas fa-caret-down"{amp}gt;{amp}lt;/i{amp}gt;{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt;'); a = $('{amp}lt;li{amp}gt;{amp}lt;a class="w3-bar-item w3-button" herf ="'   report.URL   '"{amp}gt;'   report.SidebarName   '{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt;'); a.appendTo(ul); ul.appendTo(li); } }); ul.appendTo(li); li.appendTo($('.w3-bar-block')); }); }); check(); } 

Спасибо заранее.

Я считаю, что моя проблема заключается в этой части сценария: мой код дорожного блока находится здесь в сценарии.

 if (previousGroupName === "") { previousGroupName = $groupName; li = $('{amp}lt;li{amp}gt;{amp}lt;a class="3-bar-item w3-button"{amp}gt;'   $groupName   '{amp}lt;i class="fas fa-caret-down rotate"{amp}gt;{amp}lt;/i{amp}gt;{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt;'); for (i = 0; i {amp}lt; group.SubGroup.length; i  ) { a = $('{amp}lt;li{amp}gt;{amp}lt;a class="3-bar-item w3-button"{amp}gt;'   group.SubGroup[i].SubGroupName   '{amp}lt;i class="fas fa-caret-down"{amp}gt;{amp}lt;/i{amp}gt;{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt;'); a.appendTo(ul); var reportNames = group.SubGroup[i].Report; for (j = 0; j {amp}lt; reportNames.length; j  ) { a = $('{amp}lt;li{amp}gt;{amp}lt;a class="w3-bar-item w3-button" herf ="'   reportNames[j].URL   '"{amp}gt;'   reportNames[j].SidebarName   '{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt;'); } } } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector