我创建了一个引导菜单和来自json数据的子菜单,当前来自变量的cal。菜单子菜单正常工作。如何从外部json中校准相同的数据。
next button
var data = {
"menu": [
{
"MenuId": 1,
"MenuName": "My Transactions",
"SubText": "Loan Processing",
"Dropdown":"caret",
"MenuLink": "#",
"LinkClass": "dropdown-toggle",
"DataToggle": "dropdown",
"Action": null,
"Controller": null,
"ParentID": null,
"SortOrder": 1,
"ModuleId": null,
"Menus": [
{
"MenuName": "Loan Eligibility",
"MenuId": 2,
"MenuLink": "LoanGettingStarted.aspx",
"ParentID": 1,
"SortOrder": 1,
},
{
"MenuName": "Invoice upload",
"MenuId": 3,
"MenuLink": "#",
"ParentID": 1,
"SortOrder": 1,
}
]
},
{
"MenuId": 4,
"MenuName": "My Apps",
"SubText": "Customized Workflows",
"Dropdown": "caret",
"MenuLink": "#",
"LinkClass": "dropdown-toggle",
"DataToggle": "dropdown",
"Action": null,
"Controller": null,
"ParentID": null,
"SortOrder": 2,
"ModuleId": null,
"Menus": [
{
"MenuName": "My Lead",
"MenuId": 5,
"MenuLink": "#",
"ParentID": 4,
"SortOrder": 1,
},
{
"MenuName": "Payment Details",
"MenuId": 6,
"MenuLink": "#",
"ParentID": 4,
"SortOrder": 2,
},
{
"MenuName": "Extended Warranty",
"MenuId": 7,
"MenuLink": "#",
"ParentID": 4,
"SortOrder": 3,
},
{
"MenuName": "COI",
"MenuId": 8,
"MenuLink": "#",
"ParentID": 4,
"SortOrder": 4,
},
{
"MenuName": "S2S Lead",
"MenuId": 9,
"MenuLink": "#",
"ParentID": 4,
"SortOrder": 5,
}
]
},
{
"MenuId": 10,
"MenuName": "Performance Report",
"SubText": "Intract, Contribute",
"Dropdown": "caret",
"MenuLink": "#",
"LinkClass": "dropdown-toggle",
"DataToggle": "dropdown",
"Action": null,
"Controller": null,
"ParentID": null,
"SortOrder": 2,
"ModuleId": null,
"Menus": [
{
"MenuName": "Trade Advance",
"MenuId": 11,
"MenuLink": "#",
"ParentID": 10,
"SortOrder": 1,
},
{
"MenuName": "DDF",
"MenuId": 12,
"MenuLink": "#",
"ParentID": 10,
"SortOrder": 2,
}
]
},
{
"MenuId": 13,
"MenuName": "Service Desk",
"SubText": "Raise, Resolve & Track",
"Dropdown": "caret",
"MenuLink": "#",
"LinkClass": "dropdown-toggle",
"DataToggle": "dropdown",
"Action": null,
"Controller": null,
"ParentID": null,
"SortOrder": 2,
"ModuleId": null,
"Menus": [
{
"MenuName": "Customer Service",
"MenuId": 14,
"MenuLink": "#",
"ParentID": 13,
"SortOrder": 1,
},
{
"MenuName": "Retailer Helpline",
"MenuId": 15,
"MenuLink": "#",
"ParentID": 13,
"SortOrder": 2,
}
]
},
{
"MenuId": 16,
"MenuName": "Update",
"SubText": "Communication",
"MenuLink": "LoanGettingStarted.aspx",
"LinkClass": null,
"DataToggle": null,
"Action": null,
"Controller": null,
"ParentID": null,
"SortOrder": 5,
"ModuleId": null,
"Menus": {
}
}
]
};
$(function () {
for (var key in data.menu) {
var root_menu = data.menu[key];
if (root_menu.hasOwnProperty("MenuId")) {
$("#menu").append('<li class="dropdown"><a href="' + root_menu.MenuLink + '" class="' + root_menu.LinkClass + '" data-toggle=' + root_menu.DataToggle + '>' + root_menu.MenuName + '<span class="' + root_menu.Dropdown + '"></span> <br /> <span style="font-size:smaller">' + root_menu.SubText + '</span>' + '</a></li>');
if (root_menu.hasOwnProperty("Menus") && root_menu.Menus.length > 0) {
$("#menu li:last").append("<ul class='dropdown-menu' role='menu' id='menu_" + root_menu.MenuId + "'>");
if (root_menu.Menus.length > 0) {
for (var mkey in root_menu.Menus) {
var sub_menu = root_menu.Menus[mkey];
$("#menu_" + root_menu.MenuId).append("<li><a href='" + sub_menu.MenuLink +"'>" + sub_menu.MenuName + "</a></li>");
}
}
}
}
}
});
答案 0 :(得分:0)
如果您想通过HTTP请求JSON,您可以使用jQuery.get()
,因为您已经包含了jQuery,或fetch()
,这是一种新的vanilla JS方法。
如果您不熟悉它,我建议您先阅读文档。
答案 1 :(得分:0)
你的意思是你想从字符串加载json数据吗? 如果是这种情况,请使用JSON.parse()
答案 2 :(得分:0)
Sagar,您只需在<button onclick="highlight('{{ search_expression }}')">Highlight search expression</button>
中使用$.getJSON()
方法对您的外部jQuery
文件执行AJAX
调用,然后使用JSON
进行迭代方法
实施例
$.each()
&#13;
$.getJSON("https://www.json-generator.com/api/json/get/cgkYrpeouq?indent=2", function(data) {
$.each(data, function(i, field) {
//$("div").append(field + " ");
console.log(field);
});
});
&#13;