Creating image files from a 2D array - JavaScript

Question

I want to create a list of cards, but instead of a list of playing cards that are easily numbered 1-13, it would return different information. Using baseball players and their home run totals as an example, I created this 2D array, a function to create a Player object, and a function to create the image file name:

var players = [
    ['Barry Bonds', 'LF', 73],
    ['Mark McGwire', '1B', 70],
    ['Jean Beliveau', 'RF', 66],
    ['Roger Maris', 'RF', 61],
]

function Player(name,position,rating) {
    this.name = name;
    this.position = position;
    this.homeruns = homeruns;
    this.fname = fname;
}

function fname() {
    return "images/" + this.name + " " + this.position + " " + this.rating + ".jpg";
}

After that, it gets messy. My thinking is that I would use a loop to grab the first column of the 2D Array using players[i][#] for each piece of information I want to return. The part I directly adapted from my tutorials looks like this, and it's definitely full of logical mistakes:

function list()
this.players = new Array(3);
this.bpa = 0;
for (i=0; i<3; i++) {      
this.players[i-1] = new Player(name,position,homeruns)
var name = players[i][0];
var position = players[i][1];
var homeruns = players[i][2];}
this.createList = createList}
function createList() {
return this.players [ this.bpa++ ];}

There's a whole bunch of things I intend to do with this, but I'd at least like to figure out how to generate at least one image with a file name like "Barry Bonds LF 73.jpg" and print it to the web page before I figure out anything else. Can anyone point me in the right direction here?

Answer 1

To create an image's src from the elements of your array:

 var players = [ ['Barry Bonds', 'LF', 73], ['Mark McGwire', '1B', 70], ['Jean Beliveau', 'RF', 66], ['Roger Maris', 'RF', 61], ], // create an <img> element: image = document.createElement('img'), // an empty variable to be used later: tempClone, // the element to which you want to add the image elements: target = document.body; // iterates over the 'players' array: players.forEach(function (arrayElement) { // arrayElement is the element of the players array over which we're // currently iterating (the name is unimportant, but it's always // the first argument): // cloning the created image, assigning it to created variable: tempClone = image.cloneNode(); // setting the 'src' property to a string, // joining together each of the contents of the array element (with // an empty string, and then replacing any white-space with an empty // string and appending '.jpg': tempClone.src = arrayElement.join('').replace(/\\s+/,'') + '.jpg'; // appending the newly-cloned <img> element to the 'target' parent: target.appendChild(tempClone); }); 

Or, rather than concatenating strings and then replacing white-space, you could join() them, and use encodeURIComponent() to permit and appropriately format the white-space for URLs:

 var players = [ ['Barry Bonds', 'LF', 73], ['Mark McGwire', '1B', 70], ['Jean Beliveau', 'RF', 66], ['Roger Maris', 'RF', 61], ], // create an <img> element: image = document.createElement('img'), // an empty variable to be used later: tempClone, // the element to which you want to add the image elements: target = document.body; // iterates over the 'players' array: players.forEach(function (arrayElement) { // arrayElement is the element of the players array over which we're // currently iterating (the name is unimportant, but it's always // the first argument): // cloning the created image, assigning it to created variable: tempClone = image.cloneNode(); // setting the 'src' property: tempClone.src = encodeURIComponent(arrayElement.join('')+ '.jpg'); // appending the newly-cloned <img> element to the 'target' parent: target.appendChild(tempClone); }); 

Note that the above does not 'create an image with a filename' it simply creates a string that is allocated to the src property of an <img /> element; this src should point to an existing <img /> held on the server.