[英]Opening json file in JavaScript
I have a script for my website that populates dropdown menus and is running from a custom.js file. 我有一个用于网站的脚本,该脚本填充了下拉菜单,并从custom.js文件运行。 I pieced it together from tutorials and it works. 我从教程中拼凑而成,并且可以正常工作。 I'm totally happy with it except for one thing. 除了一件事,我对此非常满意。 I have to embed the various levels of menu in the script. 我必须在脚本中嵌入各种级别的菜单。 Just this one feature is 300 lines, almost all menu. 仅此一项功能就是300行,几乎所有菜单。 I also would like to use the same information elsewhere so I've rewritten the various levels into a json file. 我还想在其他地方使用相同的信息,因此我已将各个级别重写为json文件。 All I want is to be able to open a json file there on the server and run it through this same logic. 我想要的是能够在服务器上打开一个json文件,并通过相同的逻辑运行它。 I feel like I'm close, looking into Ajax and jQuery but JavaScript is foreign to me but I just can't quite piece it together. 我觉得我接近了,正在研究Ajax和jQuery,但是JavaScript对我而言是陌生的,但我无法将其拼凑在一起。 I'm hoping someone can help me out or at least give me a nice hard shove in the right direction. 我希望有人能帮助我,或者至少给我一个正确的方向。
// Function auto populates dropdown menus. Takes in
// s1 and populates dropdown based on selection
function populatemenu(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if(s1.value == "animal") {
var optionArray = ["|",
"dog|Dog",
"cat|Cat",];
} else if(s1.value == "vegetable") {
var optionArray = ["|",
"carrots|Carrots",
"peas|Peas",];
} for(var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
// I think this is close?
function populatesitetest(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
$(function(){
$.getJSON("/menu_data.json", function(jsdata) {
jsonObj = jsdata;
console.log(jsonObj);
});
});
var optionArray = jsonObj[s1.value]
for(var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
you need to work with data when ajax json is loaded, this is essencial to understan async data connection, change for this: 您需要在加载ajax json时使用数据,这对于加强异步数据连接非常重要,为此需要进行更改:
// s1 and populates dropdown based on selection // s1并根据选择填充下拉列表
function populatemenu(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if(s1.value == "animal") {
var optionArray = ["|",
"dog|Dog",
"cat|Cat",];
} else if(s1.value == "vegetable") {
var optionArray = ["|",
"carrots|Carrots",
"peas|Peas",];
} for(var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
// I think this is close?
function populatesitetest(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
$(function(){
$.getJSON("/menu_data.json", function(jsdata) {
jsonObj = jsdata;
console.log(jsonObj);
var optionArray = jsonObj[s1.value]
for(var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
});
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.