Javascript: Populating a table with images from an array

Question

I'm trying to create a javascript table with rows of 10 from an array of images but with no luck. The table works but each cell just has [object HTMLImageElement] instead of the image.

The code I tried is below.

for(var i=0; i<myArray.length; i++){
    myArray[i] = new Image();
    myArray[i].src = i + '.gif'; 
}

document.writeln('<table border = 1 >');
for(var j=0; j<myArray.length; j++){
    if(j%10==0 && j!==0){
    document.writeln('</tr><tr>');
    }
    document.writeln('<td >' + myArray[j] + '</td>');
}
document.writeln('</tr></table>');

Al.G. · Accepted Answer · 2016-10-03 07:18:00Z

2

Look at those two lines from your code:

myArray[i] = new Image();

document.writeln('<td >' + myArray[j] + '</td>'); // wrong - myArray has to be a string

So, myArray is an image, but in the second line you're trying to make it a string - "<td>" + myArray[j] + "<td>" - this is a way to concatenate strings, not objects. (in this case, myArray[i] is implicitly converted to a string - "htmlImageElement" or whatever)

What you need is to display an <img> tag with the src attribute set to the one in myArray[i], i.e.:

document.writeln('<td ><img src="' + myArray[j].src + '" /></td>');

answered Oct 3, 2016 at 7:18

Al.G.

4,4476 gold badges34 silver badges63 bronze badges

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

Comments

kevguy · Accepted Answer · 2016-10-03 07:45:32Z

0

One way to do this is this:

$(document.createElement('table'));
var result = "";
for (let i = 0; i < myArray.length; i++){
    result+= '<tr><td><img src="' + myArray[i] + '" alt=""/></td></tr>'
}
$('#table').append(result);

Or this:

$(document.createElement('table'));
var result = "";
myArray.map(function(item){
    result+= '<tr><td><img src="' + item + '" alt=""/></td></tr>'
})
$('#table').append(result);

answered Oct 3, 2016 at 7:45

kevguy

4,4381 gold badge27 silver badges47 bronze badges

3 Comments

shep Over a year ago

Ok, thanks, I get the string vs object explanation (I think) so have amended that line. What I get now is a table of broken image icons instead of my images so I must be close but have missed something along the way. Any suggestions greatly appreciated.

shep Over a year ago

Of course I could always just include the .src as stated above and it works perfectly. Now resolved, Many thanks.

kevguy Over a year ago

Good to know! Can you mark my answer as accepted please? Also, I've tried my solution and I didn't get any broken images, did you still use myArray[i] = new Image()? As this is not necessary, assuming inside myArray are a bunch of image urls.

Collectives™ on Stack Overflow

Javascript: Populating a table with images from an array

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related