Auto Incrementing JS Object Array

Question

I am a little stumped and am probably overlooking something. Basically I have an JS object array:

var defaults = {
    pointers : {
        pointer1 : {
            top : '0px',
            left : '75px',
        },
        pointer2 : {
            top : '310px',
            left : '170px',
        },
        pointer3 : {
            top : '50px',
            left : '80px'
        },
        pointer4 : {
            top : '0px',
            left : '130px',
        },
        pointer5 : {
            top : '310px',
            left : '205px',
        },
        pointer6 : {
            top : '50px',
            left : '90px'
        }
    }
};

If I call them manually to add to a <li> with class pointer-circle it works fine:

$('.pointer-circle:eq(1)').css({
    top : defaults.pointers.pointer1.top,
    left : defaults.pointers.pointer1.left
});

But instead of manually outputting each pointer want them to go through for loop:

var i = 1;
for (i in defaults.pointers) {
    $('.pointer-circle:eq(' + i + ')').css({
        top : defaults.pointers.pointer[i].top,
        left : defaults.pointers.pointer[i].left
    });
}

This does not work. In the console log I am getting this error:

Uncaught TypeError: Cannot read property 'pointer1' of undefined

Any help is greatly appreciated.

Thanks. This is what happens when I stare at the same code too long. Not sure why I got downvoted though. Just asking for help... — PlatinumJay
– PlatinumJay, Commented Feb 19, 2016 at 21:02

John Slegers · Accepted Answer · 2016-02-19 21:15:27Z

2

This is what you're going for :

var counter = 0;
for (i in defaults.pointers) {
    $('.pointer-circle:eq(' + counter + ')').css({
        top : defaults.pointers[i].top,
        left : defaults.pointers[i].left
    });
    counter++;
}

(see also this Fiddle)

edited Feb 19, 2016 at 21:15

answered Feb 19, 2016 at 21:02

John Slegers

47.4k23 gold badges205 silver badges173 bronze badges

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

3 Comments

PlatinumJay Over a year ago

Honestly, I rewrote it a few times so initially it had been the number of <li>, using $('.pointer-circle').length with a regular for loop. So now it ends up being not what I want it to be.

John Slegers Over a year ago

@PlatinumJay : I just updated my code & posted a link to a working Fiddle.

PlatinumJay Over a year ago

@JohnSlegers thanks, makes sense now. I had changed my mind throughout the code that I ended up mixing myself up.

Evan Davis · Accepted Answer · 2016-02-19 21:00:10Z

2

i refers directly to the object. You want just i.top. You are conflating a standard for loop with a for-in loop. Of course, this means that $('.pointer-circle:eq(' + i + ')') is not what you think it is.

edited Feb 19, 2016 at 21:00

answered Feb 19, 2016 at 20:55

Evan Davis

36.7k7 gold badges53 silver badges58 bronze badges

Collectives™ on Stack Overflow

Auto Incrementing JS Object Array

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related