I want to loop through an array of objects and i am unable to find the key's of each object. What am i doing wrong?
The Javascript / jQuery code:
var position = [];
$('.box').each(function(){
var id = $(this).attr('id');
var offset = $(this).offset();
var offsetX = offset.left;
var offsetY = offset.top;
position.push('{"id":'+id+',"offX":'+offsetX+',"offY":'+offsetY+'}');
});
for (var i = 0; i < position.length; i++) {
console.log(position[i].id); // i get the error of undefined
}
Html markup:
<div id="parent">
<div class="box" id="1">1</div>
<div class="box" id="2">2</div>
<div class="box" id="3">3</div>
<div class="box" id="4">4</div>
<div class="box" id="5">5</div>
<div class="box" id="6">6</div>
<div class="box" id="7">7</div>
<div class="box" id="8">8</div>
<div class="box" id="9">9</div>
<div class="box" id="10">10</div>
</div>
Here the jsfiddle