如何校准外部json

时间:2018-06-07 08:52:00

标签: javascript jquery json

我创建了一个引导菜单和来自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>");
                    }
                }
            }
        }
    }
});

3 个答案:

答案 0 :(得分:0)

如果您想通过HTTP请求JSON,您可以使用jQuery.get(),因为您已经包含了jQuery,或fetch(),这是一种新的vanilla JS方法。

如果您不熟悉它,我建议您先阅读文档。

答案 1 :(得分:0)

你的意思是你想从字符串加载json数据吗? 如果是这种情况,请使用JSON.parse()

这里有更好的解释。 https://www.w3schools.com/js/js_json_parse.asp

答案 2 :(得分:0)

Sagar,您只需在<button onclick="highlight('{{ search_expression }}')">Highlight search expression</button> 中使用$.getJSON()方法对您的外部jQuery文件执行AJAX调用,然后使用JSON进行迭代方法

实施例

&#13;
&#13;
$.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;
&#13;
&#13;