我真的觉得我该死的不要问,但在此之前我必须把头发撕掉。
当js解释器到达这个特定的方法时,我可以将它打印到控制台没问题,它是一个“事件”对象的数组。从FireBug我可以看到它,但是当我尝试设置一个循环来对这个数组做任何事情时,就好像它不存在一样。我绝对感到困惑......
一些事情:
我是新手,我尝试了for(var index in list)
循环,无济于事,我也尝试了常规的旧for(var i = 0; i < listIn.length; i++)
,我也尝试通过设置来获取局部变量的大小var size = listIn.length
。
一旦我尝试循环它,我什么也得不到,但我可以从FireBug控制台访问其中的所有对象没问题。请帮助,即使只是给我一点点我应该看的东西会很棒。
对于数组本身,我没有遇到以下形式从PHP获取数组的问题:[{"Event_Id":"9", "Title":"none"}, etc etc ]
这是我的主启动器JavaScript文件中的代码。我还将发布一个返回的JSON数据样本。我担心我可能会通过首先创建一个名为content
的大型对象来过度扩展自己,该对象用于保存DOM字符串,设置和常用方法等属性,但到目前为止其他所有内容都在工作。
在相应的html页面上调用正文init()
时会调用onload
函数,在调用setAllEvents
和setEventNavigation
期间,我会丢失。
只是补充一点,我试图在触摸jQuery之前学习JavaScript基础知识。
由于
var dom, S, M, currentArray, buttonArray, typesArray, topicsArray;
content = {
domElements: {},
settings: {
allContent: {},
urlList: {
allURL: "../PHP/getEventsListView.php",
typesURL: "../PHP/getTypes.php",
topicsURL: "../PHP/getTopics.php"
},
eventObjArray: [],
buttonObjArray: [],
eventTypesArray: [],
eventTopicsArray: []
},
methods: {
allCallBack: function (j) {
S.allContent = JSON.parse(j);
var list = S.allContent;
for (var index in list) {
var event = new Event(list[index]);
S.eventObjArray.push(event);
}
},
topicsCallBack: function(j) {
S.eventTopicsArray = j;
var list = JSON.parse(S.eventTopicsArray);
topicsArray = list;
M.populateTopicsDropDown(list);
},
typesCallBack: function(j) {
S.eventTypesArray = j;
var list = JSON.parse(S.eventTypesArray);
typesArray = list;
M.populateTypesDropDown(list);
},
ajax: function (url, callback) {
getAjax(url, callback);
},
testList: function (listIn) {
// test method
},
setAllEvents: function (listIn) {
// HERE IS THE PROBLEM WITH THIS ARRAY
console.log("shall we?");
for(var index in listIn) {
console.log(listIn[index]);
}
},
getAllEvents: function () {
return currentArray;
},
setAllButtons: function (listIn) {
buttonArray = listIn;
},
getAllButtons: function () {
return buttonArray;
},
setEventNavigation: function(current) {
// SAME ISSUE AS ABOVE
var l = current.length;
//console.log("length " + l);
var counter = 0;
var endIndex = l - 1;
if (current.length < 4) {
switch (l) {
case 2:
var first = current[0];
var second = current[1];
first.setNextEvent(second);
second.setPreviousEvent(first);
break;
case 3:
var first = current[0];
var second = current[1];
var third = current[2];
first.setNextEvent(second);
second.setPreviousEvent(first);
second.setNextEvent(third);
third.setPreviousEvent(second);
break;
default:
break;
}
} else {
// do something
}
},
populateTopicsDropDown: function(listTopics) {
//console.log("inside topics drop");
//console.log(listTopics);
var topicsDropDown = document.getElementById("eventTopicListBox");
for(var index in listTopics) {
var op = document.createElement("option");
op.setAttribute("id", "dd" + index);
op.innerHTML = listTopics[index].Main_Topic;
topicsDropDown.appendChild(op);
}
},
populateTypesDropDown: function(listTypes) {
//console.log("inside types drodown");
//console.log(listTypes);
var typesDropDown = document.getElementById("eventTypeListBox");
for(var index2 in listTypes) {
var op2 = document.createElement("option");
op2.setAttribute("id", "dd2" + index2);
op2.innerHTML = listTypes[index2].Main_Type;
typesDropDown.appendChild(op2);
}
}
},
init: function() {
dom = this.domElements;
S = this.settings;
M = this.methods;
currentArray = S.eventObjArray;
buttonArray = S.buttonObjArray;
topicsArray = S.eventTopicsArray;
typesArray = S.eventTypesArray;
M.ajax(S.urlList.allURL, M.allCallBack);
//var tempList = currentArray;
//console.log("temp array length: " + tempList.length);
M.setAllEvents(currentArray);
M.testList(currentArray);
M.setEventNavigation(currentArray);
//M.setEventNavigation();
M.ajax(S.urlList.topicsURL, M.topicsCallBack);
M.ajax(S.urlList.typesURL, M.typesCallBack);
}
};
答案 0 :(得分:0)
您遇到的问题是currentArray
异步获取其值,这意味着您过早地调用setAllEvents
。那时allCallBack
函数尚未执行。只有在当前运行的代码完成后才会发生这种情况(直到调用堆栈变为emtpy),ajax
请求才会触发回调。
因此,只有在Ajax调用完成后才应调用setAllEvents
和任何其他依赖currentArray
的代码。
注意:它在控制台中工作的原因是,当您从控制台请求值时,ajax调用已经返回了响应。
如果没有查看其余的代码,以及它可能遇到的任何其他问题,这就解决了您遇到的问题:
init: function() {
dom = this.domElements;
S = this.settings;
M = this.methods;
currentArray = S.eventObjArray;
buttonArray = S.buttonObjArray;
topicsArray = S.eventTopicsArray;
typesArray = S.eventTypesArray;
M.ajax(S.urlList.allURL, function (j) {
// Note that all the rest of the code is moved in this call back
// function, so that it only executes when the Ajax response is
// available:
M.allCallBack(j);
//var tempList = currentArray;
//console.log("temp array length: " + tempList.length);
M.setAllEvents(currentArray);
M.testList(currentArray);
M.setEventNavigation(currentArray);
//M.setEventNavigation();
// Note that you will need to take care with the following asynchronous
// calls as well: their effect is only available when the Ajax
// callback is triggered:
M.ajax(S.urlList.topicsURL, M.topicsCallBack); //
M.ajax(S.urlList.typesURL, M.typesCallBack);
});
}