javascript object property logs undefined

Question

ok so i have a js object declared at the top of my js file and at the bottom i have a function that is creating a property and adding a value to it but when i go to console log the new property in a different function it returns undefined but if i log the whole object it shows the object and the new property with its value below is the code:

$(document).ready(function(){
var allVars={};
contentJson();
bioPageClass();


//start bioPage code.
function bioPageClass(){
    console.log(allVars.nums)
    //allVars.bioContent=allVars.allContent.theComittee.bios;
    allVars.timeTxt=allVars.allContent.theComittee.timeline;
    mouseEx();
    bioInfo(0);
    $('#next').click(function(){
                var itsindex = inkDot($('.dot').index($('.filled'))+1);

            });

            $('#pre').click(function(){
                var itsindex2 = inkDot($('.dot').index($('.filled'))-1);

            });

            function inkDot(dots){

                $('.dot').removeClass('filled');
                var equalize = dots < 0 ? 0 : dots;

                if(equalize <= $('.dot').length -1){
                $('.dot:eq('+equalize+')').addClass('filled');
                console.log('1st if '+equalize);
                bioInfo(equalize);
                }else{
                    equalize=0;
                    console.log('the else '+equalize);
                    $('.dot:eq('+equalize+')').addClass('filled');
                    bioInfo(equalize);
                }
            }

            function mouseEx(){
                $(".TLBtn").mouseover(function(){
                    if(!$(this).hasClass('clkd')){
                        $(this).addClass("timeROver");
                    }
                }).mouseout(function(){
                    if(!$(this).hasClass('clkd')){
                        $(this).removeClass("timeROver");       
                    }
                });

                $(".TLBtn").click(function(){
                    $(".TLBtn").removeClass('clkd timeROver');
                    $(this).addClass('clkd timeROver');
                })
            }

            function timeLineInfo(){

            }

            function bioInfo(ix){
                $('.bioCon').fadeOut(100, function(){
                    $('#bioImage > img').attr('src',bioContent[ix].image);
                    $('#bioName').html(allVars.bioContent[ix].name);
                    $('#bioTitle').html(allVars.bioContent[ix].title);
                    $('#bioDisc').html(allVars.bioContent[ix].details);
                    $('.bioCon').fadeIn();
                });
            }
        }
    //end bio page code.


            //call content json.
            function contentJson(){
                $.getJSON("content.json", function(json){
                allVars.allContent = json;
                allVars.nums = 8000;


                });
            }
});

what i'm i doing wrong here???

If you replace console.log with alert, is the output correct? — Rob W
– Rob W, Commented Jan 12, 2012 at 17:39
Works for me in Chromium 18.0.997.0, may be a browser issue. — JaredMcAteer
– JaredMcAteer, Commented Jan 12, 2012 at 17:40
Is that exactly the code? I see no top/bottom of the JS file going on here. The way I understand your description you're trying to access an object created like above with inline JS... which won't work unless it's called AFTER the .ready command has fired (after the DOM is loaded) — Rudu
– Rudu, Commented Jan 12, 2012 at 17:46
ok so for some reason this example now works but when i scale it to a larger amount of code it fails: — zero
– zero, Commented Jan 12, 2012 at 17:53

glortho · Accepted Answer · 2012-01-12 18:19:38Z

1

The problem is that these functions are being run asynchronously and bioPageClass gets called before getJSON is done. Change it so that bioPageClass gets called as a callback.

You could do this if you wanted:

At the top:

contentJson(bioPageClass);

In contentJson:

function contentJson(callback){
  $.getJSON("content.json", function(json){
    allVars.allContent = json;
    allVars.nums = 8000;
    callback();
  });
}

But it may just be easier (and better practice) to pass allVars around rather than keeping it global. Define it in contentJson and then pass it to bioPageClass. Without the fancier callback, you could just do:

function contentJson(){
  var allVars = {};
  $.getJSON("content.json", function(json){
    allVars.allContent = json;
    allVars.nums = 8000;
    bioPageClass(allVars);
  });
}

edited Jan 12, 2012 at 18:19

answered Jan 12, 2012 at 18:09

glortho

13.2k8 gold badges51 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

glortho Over a year ago

In almost all cases, ajax functions will be run asynchronously so they don't block the interface as they're waiting for results. This is one of the all-time great features of Javascript. However, it means you have to be wary of problems like yours. Sequential position in code doesn't always mean sequential execution. Whenever you want to be sure something runs after an ajax call, be sure to put it in the callback.

zero Over a year ago

ah gotcha. well would it be bad practice to have one function (lets call it initAll) hold all the main function calls (e.g. biopageclass,homepageclass etc...) then have initAll as a callback(which would pass it the object allvars then it would pass allvars to the other main functions)?

zero Over a year ago

like this function initAll(allvars){biopageclass(allvars)//etc.. }

glortho Over a year ago

I think that's a better way to go. One parent function that scopes everything and passes vars along as necessary. Even then it can be helpful/safer to pass the vars directly to the functions that need them rather than relying on closure scoping, but either way will work.

zero Over a year ago

but with both ways that means the page's js would have to wait for the json to finish being called wouldn't this effectively nullify its asynchronous ability? in essence that would make the function with the json in it the main function so if anything went wrong with the json call the rest of the site's js would not load?

|

Collectives™ on Stack Overflow

javascript object property logs undefined

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related