I am currently facing challenges with iterating through an array of objects that contain images. The array appears empty when logged in the console, but upon inspecting it in the console, I can see all the objects along with their iteration numbers. I have been unable to find a clear solution online on how to properly format the array for iteration using a 'for in' loop in Vue.js. I have included the code below with comments providing more context than my description.
const frameImage = [
{
url: 'http://www.realmadryt.pl/fotki/_up/newsy/lukamodric_165.png'
},
{
url: 'http://www.realmadryt.pl/fotki/_up/newsy/florentinoperez_11.jpg'
},
{
url: 'http://www.realmadryt.pl/fotki/_up/newsy/ramosbarkinsta1.jpg'
},
{
url: 'http://www.realmadryt.pl/fotki/_up/newsy/lukamodric_165.png'
},
{
url: 'http://www.realmadryt.pl/fotki/_up/newsy/florentinoperez_11.jpg'
},
{
url: 'http://www.realmadryt.pl/fotki/_up/newsy/ramosbarkinsta1.jpg'
},
];
let createdImages = [];
frameImage.forEach(item => {
const image = new Image();
image.src = item.url;
image.onload = () => {
// set image only when it is loaded
createdImages.push({
image,
width: image.width,
height: image.height,
x: 0,
y: 0,
draggable: true
});
};
});
console.log(createdImages)
// no output
createdImages.forEach(item => {
console.log(item)
});
//still no output
for(img in createdImages) {
console.log(img);
}
//length shown as 0?
console.log(createdImages.length)
Also available on jsFiddle: LINK