如何从外部 JSON 读取并应用于导航栏 Javascript答案

【问题标题】：How to read from external JSON and apply to navbar Javascript如何从外部 JSON 读取并应用于导航栏 Javascript
【发布时间】：2021-03-03 18:23:11
【问题描述】：

以this 为起点，如何更改它以从外部 data.json 文件中读取？我对 JQuery 相当陌生。使用时有效

var JSON = {...与 data.json 相同的结构...}

并给了我预期的结果：在 json 数据之后构建的导航栏。

我的 index.js 和 index.html

import $, { type } from 'jquery'

try {
    var element = EMBED.getRootElement();
    var navbar = element.find("#navigationDiv");
    const userConfig = EMBED.getComponent().schema.data

    var json = userConfig.jsonfile.file // this is the file uploaded 
    json = (json.split(",").pop()); 
    console.log(json)
    json = atob(json)
    console.log(json)                    // prints out expected result, decoded json from base64

    function makeUL(lst, topLevelUl, rootLvl) {
        console.log("Make ul")
        var html = [];
        if (topLevelUl) {
            html.push('<ul class="nav navbar-nav" id="menu">');
            topLevelUl = false;
        } else {
            html.push('<ul class="submenu dropdown-menu" role="menu">');
        }
        $(lst).each(function () {
            html.push(makeLI(this, topLevelUl, rootLvl))
        });
        html.push('</ul>');
        rootLvl = true;
        return html.join("\n");
    }

    function makeLI(elem, topLevelUl, rootLvl) {
        console.log("make Li")
        var html = [];
        if (elem.children && !rootLvl) {
            html.push('<li class="dropdown-submenu dropdown">');
        } else {
            html.push('<li class="dropdown">');
            rootLvl = false;
        }
        //html.push(elem.link);
        if (elem.value) {
            html.push('<a class="dropdown-toggle" data-toggle="dropdown" href="#' + elem.value + '"><i style="height:20px; width:20px;" class="' + elem.icon + '"></i>'  + elem.link + ' </a>');
            //<i style='height:20px; width:20px;' class='" + submenuData[i]["icon"] + "'></i>"
        }

        if (elem.children) {
            html.push(makeUL(elem.children, topLevelUl, rootLvl));
        }
        html.push('</li>');
        return html.join("\n");
    }

    $(function () {
        var topLevelUl = true;
        $(navbar).html(makeUL(JSON.menu, topLevelUl, true));
        console.log("lager meny")
        navbar.innerHTML = navbar;
        console.log(navbar)
    });
}
catch {
    console.log("error")
}

<div class="navbar navbar-fixed-top">
    <div id="navigationDiv" class="navbar-inner">
    </div>
</div>

还有我的 data.json

{
  "menu": [
    {
      "id": 4,
      "link": "UnderGrad",
      "value": "undergrad.com",
      "icon": "fas fa-ban",
      "__domenu_params": {},
      "children": [
        {
          "id": 3,
          "link": "art.undergrad",
          "value": "art.undergrad.com",
          "icon": "fas fa-ban",
          "__domenu_params": {},
          "children": [
            {
              "id": 5,
              "link": "classic.art.undergrad",
              "value": "classic.art.undergrad.com",
              "icon": "fas fa-ban",
              "__domenu_params": {},
              "children": [
                {
                  "id": 5,
                  "link": "hey",
                  "value": "hey",
                  "icon": "fas fa-ban",
                  "__domenu_params": {}
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "id": 2,
      "link": "Grad",
      "value": "grad.com",
      "icon": "fas fa-ban",
      "__domenu_params": {},
      "children": [
        {
          "id": 1,
          "link": "music.grad",
          "value": "music.grad.com",
          "icon": "fas fa-ban",
          "__domenu_params": {}
        },
        {
          "id": 6,
          "link": "science.grad",
          "value": "science.grad.com",
          "icon": "fas fa-ban",
          "__domenu_params": {}
        }
      ]
    }
  ]
}

【问题讨论】：

如果 json 是外部的，那么假设它是异步加载是合理的，这意味着您将需要使用回调或承诺；不过我不确定，但您可能想查看这些主题:)
你有服务器端代码吗？您的 html 只是一个文本文件还是以某种方式生成的？如果它已生成，那么您将通过在生成过程中包含 json 来改进 UX。否则你有：页面加载（无菜单），doc.ready开始加载json（仍然没有菜单）然后菜单加载。您的小提琴非常简单，但是一旦您加载其他资源， doc.ready 就会被推回（以及获取/加载 json 的时间）-您会得到相当大的 FOUC。我已经为你模拟了这个：jsfiddle.net/5eh4mj8L
另请注意，您的小提琴没有任何 JSON - 它有一个名为“JSON”的变量，它是一个对象，而不是字符串。您的文件将是一个字符串。
@zedling 打印在控制台中的 json 身体负载。文件本身是事先为用户上传到配置站点的，所以我可以假设不是这样吗？
不，确实如此。要从嵌入对象更改为加载外部文件，您需要一个 ajax 调用 - 根据定义，它是异步的 - ajax 调用在完成时提供一个回调。

标签： javascript jquery json bootstrap-4

【解决方案1】：

要加载 json 文件，请使用 jQuery.getJSON()。

要替换小提琴中的代码：

var JSON = { menu: [{ "id"...
$("#navigationDiv").html(makeUL(JSON.menu, topLevelUl, true));

你会使用：

$.getJSON("data.json", function(data) {
    $("#navigationDiv").html(makeUL(data.menu, topLevelUl, true));  
});

“data.json”是外部 json 文件的 url

【讨论】：

非常感谢。我必须说这是一个非常简单有效的解决方案。 JSON 是 base64 编码的，但您的解决方案使我也能够跳过 atob()。