如何读取外部JSON并应用于navbar Javascript

作为起点，如何将其更改为从外部data.json文件读取？我对JQuery相当陌生。如果使用，它会工作

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

并给出了预期的结果：在json数据之后构造一个navbar

My index.js和index.html

从“jquery”导入$，{type}
试一试{
var element=EMBED.getRootElement（）；
var navbar=element.find（“#navigationDiv”）；
const userConfig=EMBED.getComponent（）.schema.data
var json=userConfig.jsonfile.file//这是上载的文件
json=（json.split（“，”）.pop（）；
console.log（json）
json=atob（json）
log（json）//打印出预期结果，即从base64解码的json
函数makeUL（lst、topLevelUl、rootLvl）{
console.log（“makeul”）
var html=[]；
如果（最高水平）{
html.push（'
）；
topLevelUl=假；
}否则{
html.push（“
”）；
}
$（lst）。每个（函数（）{
push（makeLI（this、topLevelUl、rootLvl））
});
html.push（“
”）；
rootLvl=true；
返回html.join（“\n”）；
}
函数makeLI（elem、topLevelUl、rootLvl）{
console.log（“makeli”）
var html=[]；
if（elem.children&&！rootLvl）{
html.push（“
”）；
}否则{
html.push（“
”）；
rootLvl=false；
}
//html.push（elem.link）；
if（元素值）{
html.push（“”）；
//"
}
if（要素儿童）{
push（makeUL（elem.children，topLevelUl，rootLvl））；
}
html.push（“
”）；
返回html.join（“\n”）；
}
$（函数（）{
var topLevelUl=真；
$（navbar.html（makeUL（JSON.menu，topLevelUl，true））；
console.log（“lager meny”）
navbar.innerHTML=navbar；
控制台日志（导航栏）
});
}
抓住{
console.log（“错误”）
}

要加载json文件，请使用

要替换小提琴中的代码，请执行以下操作：

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是外部的，那么可以合理地假设它是异步加载的，这意味着您需要使用回调或承诺；虽然我不确定，但您可能想检查以下主题：）您有服务器端代码吗？您的html只是一个文本文件还是以某种方式生成的？如果它是生成的，那么您将在生成过程中通过包含json改进UX。否则，您将有：页面加载（无菜单），doc.ready开始加载json（仍无菜单），然后加载菜单。您的操作非常简单，但一旦加载其他资源，doc.ready就会被向后推（以及获取/加载json的时间），您就会得到相当大的FOUC。我已经为您模拟过了：还要注意，您的fiddle没有任何JSON——它有一个名为“JSON”的变量，它是一个对象，而不是字符串。您的文件将是一个字符串。@zedling主体加载时在控制台中打印的json。文件本身是预先上传到用户的配置站点上的，所以我可以假设不是这样吗？不，就是这样。要从嵌入式对象更改为加载外部文件，您需要一个ajax调用—根据定义，它是异步的—ajax调用在完成时提供回调。非常感谢。我必须说，这是一个非常简单和有效的解决办法。JSON是base64编码的，但是您的解决方案使我能够跳过atob（）。