Javascript数组显示在控制台中,但我无法访问循环

时间:2016-06-01 17:59:25

标签: javascript arrays json

我真的觉得我该死的不要问,但在此之前我必须把头发撕掉。

当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函数,在调用setAllEventssetEventNavigation期间,我会丢失。

只是补充一点,我试图在触摸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);
    }
};

1 个答案:

答案 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);
    });
}