Jquery each in each function return undefined

Question

I am looping a object using $.each function, but I'm getting undified values.

What is wrong with my code?

var mainPageCircle = {
    circles: {
        c1: {
            color: '#730000',
            text: 'Content'
        },
        c2: {
            color: '#004f74',
            text: 'Consulting'
        },
        c3: {
            color: '#146c00',
            text: 'Commerce'
        }
    },
    radious: 100,
    stroke: 10,
    strokeColor: '#fff',
    opacity: 0.7
}

$.each(mainPageCircle, function(key, value) {
    var circles = value.circles,
        radious = value.radious;
    $.each(circles, function(index, c) {
        console.log(index, c); // i am getting error; i need index should be 0,1,2 and c should be : c1,c2,c3 values
    })
})

mainCrProp != mainPageCircle - or is that just a transcription mistake? — Rory McCrossan
– Rory McCrossan, Commented Nov 6, 2012 at 8:57
Does circles have a value when the error occurs? Have you tried using a browser debugging tools to place a breakpoint in the each loop investigating the objects? (F12 default key in most browsers, for Firefox get Firebug), is it the outer or inner each loop causing the problem? Have you tried running it without the inner loop? — Nope
– Nope, Commented Nov 6, 2012 at 8:58

A.M. D. · Accepted Answer · 2012-11-06 09:11:28Z

3

Your each is running for all items of mainPageCircle, not just the circles defined in it. This may be more what you're aiming for:

var mainPageCircle = {
    circles :{
        c1:{color:'#730000',text:'Content'},
        c2:{color:'#004f74',text:'Consulting'},
        c3:{color:'#146c00',text:'Commerce'}
    },
    radious:100,
    stroke:10,
    strokeColor:'#fff',
    opacity:0.7
    }
$.each(mainPageCircle.circles , function (key,value) {
       var circles = value,radious = mainPageCircle.radious;
       $.each(circles, function (index,c) {
            console.log(index,c);
        });
});

answered Nov 6, 2012 at 9:11

A.M. D.

9386 silver badges10 bronze badges

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

Comments

Johan · Accepted Answer · 2012-11-06 09:00:18Z

3

Something like this?

var mainPageCircle = {
    circles :{
        c1:{color:'#730000',text:'Content'},
        c2:{color:'#004f74',text:'Consulting'},
        c3:{color:'#146c00',text:'Commerce'}
    },
    radious:100,
    stroke:10,
    strokeColor:'#fff',
    opacity:0.7
};

var i = 0;

$.each(mainPageCircle.circles, function(){
    console.log(i, this); 
    //i: current index
    //this: c1, c2 etc
    //use properties on this to fetch the values
    //this.color for example
    i++;
});

You won't be able to use key in your example as an index integer, since it will fetch the object key, and not the current index in the loop.

Fiddle

answered Nov 6, 2012 at 9:00

Johan

35.4k62 gold badges191 silver badges309 bronze badges

4 Comments

Nope Over a year ago

.each already provides the index and the element value in the callback. As per docs callback(indexInArray, valueOfElement). There should be no need to track your own with i/i++. You should be able to do: $.each(mainPageCircle.circles, function(index){ console.log(index, this) }

Johan Over a year ago

@FrançoisWahl Check out this fiddle: jsfiddle.net/PxHFg/1 . As i said in the post, indexInArray will be the object key in this case.

Nope Over a year ago

Ah,..I see. I only see now in documentation further down the comments regarding the use of .each on a collection of objects where index becomes the key. When I read your post I didn't expect that at all, kind if didn't make sense to me at the time of reading. Nice one. :) +1 for that and sorry for the mix-up.

Johan Over a year ago

@FrançoisWahl Hehe no problem, its pretty confusing until you've read the entire API page about the loop ;-)

David Hellsing · Accepted Answer · 2012-11-06 09:01:10Z

2

I’m not sure what your intention is, but you probably meant to do something like:

var mainPageCircle = {
    circles :{
        c1:{color:'#730000',text:'Content'},
        c2:{color:'#004f74',text:'Consulting'},
        c3:{color:'#146c00',text:'Commerce'}
    },
    radious:100,
    stroke:10,
    strokeColor:'#fff',
    opacity:0.7
}

var circles = mainPageCircle.circles,
    radious = mainPageCircle.radious;
$.each(circles, function (index, c) {
    console.log(index,c); // c1, props, etc...
    console.log(parseInt(index,10)); // 1,2,3...
});

answered Nov 6, 2012 at 9:01

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

Collectives™ on Stack Overflow

Jquery each in each function return undefined

3 Answers 3

Comments

Fiddle

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related