javascript for loop over array with objects - weird results

Question

I have an array, lets call it foo. Each element of the array holds an object.

Example:

var foo = new Array();

var test = new Object();
test.name = "Item name1";
test.price = 20.00;

foo.push(test);

var test = new Object();
test.name = "Item name2";
test.price = 10.00;

foo.push(test);

I should now have:

foo[0] => object{name: Item name1, price: 20.00}
foo[1] => object{name: Item name2, price: 10.00}

the problem:

console.log(foo.length); // 2

for(var x = 0; x < foo.length; x++) { 
     console.log(foo[x]); // foo[x] is undefined 2X
}

Why is it that I cannot for loop the array of objects and access them as such? I should be able to say foo[x].name (or foo[x]['name']) from within the for loop to get the values but I'm getting undefined! any one know why?

Update:

Since that example is way to simplified, here is the full code of what I'm doing, essentially pkgs has [0] populated at the point of running. A new element (this is an add pacakge function) is added then then values are updated. After that I need to use the new insurance values from the two packages to update the UI with the proper insurance values per-package. The very last comment is the interesting part.

var pk = $('#shipment_'+shipid).data('pkgs'); 
var pkgs = new Array();
for(index in pk) {
    pkgs.push(jQuery.extend(true, {}, pk[index]));
}
var pkgnum = pkgs.length; // always returns one higher than last index.

// add new pkg to array
pkgs[pkgnum] = new Object();
pkgs[pkgnum].weight = weight;

// overwrite packing slip data.
for(var x = 0; x < pkgs.length; x++) {
    var curPS = new Array();
    var curins = 0;
    for(var y = 0; y < shipmentItems.length; y++) {
        var curqty = parseInt($('#pkgqty-'+y+'-'+x).val());
        var nsrow = jQuery.extend(true, {}, shipmentItems[y]);
        curins += curqty * shipmentItems[y]['price'];
        curPS.push(nsrow);
        curPS[y]['qty'] = curqty;
    }
    pkgs[x].packing_slip = curPS;
    pkgs[x].insurance = Math.ceil(curins);
}

// write pkgs data()
$('#shipment_'+shipid).removeData('pkgs');
$('#shipment_'+shipid).data('pkgs', pkgs);  

// update insurance values
console.log(pkgs); // shows two objects
console.log("len: " + pkgs.length); // len is 2
for(var x = 0; x <= pkgs.length; x++) {
    var insuranceHTML = "$"+pkgs[x].insurance+'<a href="javascript:overrideInsurance('+shipid+','+x+');"><img src="/img/edit2.png" height="16" width="16" alt="" title="Override Insurance Value" align="absmiddle" /></a>';
    $('#pkgins-'+shipid+'-'+x).html(insuranceHTML);
    // pkgs[x] == undefined when x = 1 but not when x=0
}

I cannot see any problems here. Are you sure that you have the exact same code there? — KARASZI István
– KARASZI István, Commented Sep 6, 2011 at 22:15
I just ran your code in my console and had no problems. There's something else going on. Is there other code in between these statements? — Mike Robinson
– Mike Robinson, Commented Sep 6, 2011 at 22:16
@What's the habit? Thinking that JS and jQuery are the same thing? I would go into rehab immediately to kick that habit ASAP. Joking aside, you should create a jsfiddle before posting a question. Always create a reduction of your problems, don't assume you know what the problem is. — Ruan Mendes
– Ruan Mendes, Commented Sep 6, 2011 at 22:18

Jesse · Accepted Answer · 2011-09-06 22:18:05Z

2

Seems to work just fine:

http://jsfiddle.net/JyLD4/1/

Are you sure this is the issue?

answered Sep 6, 2011 at 22:18

Jesse

10.5k10 gold badges64 silver badges81 bronze badges

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

1 Comment

Rick Kukiela Over a year ago

I guess I have it working now. I changed: // add new pkg to array pkgs[pkgnum] = new Object(); to: // add new pkg to array var newpkg = new Object(); pkgs.push(newpkg); and I also changed the <= in the for loop to just <... Now pkgs[0] and pkgs[1] are defined and working.

Guffa · Accepted Answer · 2011-09-06 22:20:12Z

0

You have to have some other code that is interfering with what you have there. I tested it, and I don't get the same result:

http://jsfiddle.net/Guffa/xaTjd/1/

Console:

2
Object { name="Item name1", price=20 }
Object { name="Item name2", price=10 }

answered Sep 6, 2011 at 22:20

Guffa

703k111 gold badges760 silver badges1k bronze badges

Collectives™ on Stack Overflow

javascript for loop over array with objects - weird results

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related