I'm trying to create an array of image objects, but struggling. Each object will hold an image and a caption for the image.

The following code works fine when I paste it into Firebug for checking:

Example 1

var imageArray = new Array();

imageArray[0] = new Image();
console.log(imageArray[0]);  //result is <img>

imageArray[0].src = "my-image-01.png";
console.log(imageArray[0]); // result is <img src="my-image-01.png"/>

imageArray[0] = {imageCaption: "A caption for the image"};  //an object
console.log(imageArray[0].imageCaption) //result is: A caption for the image

imageArray[1] = new Image()

... etc

However, I thought the following would make more sense, but it keeps throwing an error and I can't understand why.

Example 2

var imageArray = new Array();

imageArray[0]= {
    image01: new Image(),
    image01.src: "my-image-01.png",  //"SyntaxError: missing : after property id"
    imageCaption: "An image caption"
    };

imageArray[1] = {
    image02: new Image().
    image02.src: "my-image-02.png",
    imageCaption: "Another image caption"
    }

Can anyone explain what's wrong with the code above? Is the first example I posted, the approach I should use? Many thanks

I'm trying to create an array of image objects, but struggling. Each object will hold an image and a caption for the image.

The following code works fine when I paste it into Firebug for checking:

Example 1

var imageArray = new Array();

imageArray[0] = new Image();
console.log(imageArray[0]);  //result is <img>

imageArray[0].src = "my-image-01.png";
console.log(imageArray[0]); // result is <img src="my-image-01.png"/>

imageArray[0] = {imageCaption: "A caption for the image"};  //an object
console.log(imageArray[0].imageCaption) //result is: A caption for the image

imageArray[1] = new Image()

... etc

However, I thought the following would make more sense, but it keeps throwing an error and I can't understand why.

Example 2

var imageArray = new Array();

imageArray[0]= {
    image01: new Image(),
    image01.src: "my-image-01.png",  //"SyntaxError: missing : after property id"
    imageCaption: "An image caption"
    };

imageArray[1] = {
    image02: new Image().
    image02.src: "my-image-02.png",
    imageCaption: "Another image caption"
    }

Can anyone explain what's wrong with the code above? Is the first example I posted, the approach I should use? Many thanks

• javascript

5 Answers 5

Your best bet is to use a sort of factory and .push to the images array.

Try something like this

// Image factory
var createImage = function(src, title) {
  var img   = new Image();
  img.src   = src;
  img.alt   = title;
  img.title = title;
  return img; 
};

// array of images
var images = [];

// push two images to the array
images.push(createImage("foo.jpg", "foo title"));
images.push(createImage("bar.jpg", "bar title"));

// output
console.log(images);

Output

[
  <img src=​"foo.jpg" title=​"foo title" alt="foo title">​, 
  <img src=​"bar.jpg" title=​"bar title" alt="bar title">​
]

In your first example you have

var imageArray = new Array();
imageArray[0] = new Image(); // an image object
imageArray[0].src = "my-image-01.png"; // src set in image object

// Here you are pletely destroying the image object and creating a new object
imageArray[0] = { imageCaption: "A caption for the image" };  //an object
console.log(imageArray[0]); // Object {imageCaption: "A caption for the image"} 

In your second example, you have

imageArray[0]= {
    image01: new Image(),
    image01.src: "my-image-01.png",  // <-- this is wrong
    imageCaption: "An image caption"
};

Here image01 is only a key/string not an object and image01.src is making the error because of the . in it, a key name can contain _ and space (if quoted, i.r. 'key one'). So, you can use it this way, but I think you can remove the image01 : new Image() and just can create new images when you use this objec, like this fiddle, anyways.

var imageArray = [];
imageArray[0] = {
    image01 : new Image(),
    src : "my-image-01.png",
    imageCaption : "Image caption for image-01"
};
imageArray[1] = {
    image01 : new Image(),
    src : "my-image-02.png",
    imageCaption : "Image caption for image-02"
};

for(x = 0; x < imageArray.length; x++) {
    console.log(imageArray[x].src);
}

So, console.log(imageArray[0].src); will output my-image-01.png. If you want to use a caption in the image object itself then there is no caption attribute for image object, instead you can use data-caption or alt to use later somehow, but using HTML5 you can use a caption like this

<figure>
    <img src="picture.jpg" alt="An awesome picture">
    <figcaption>Caption for the awesome picture</figcaption>
</figure>

An example here. Also, as an alternative, you may look at this answer with example.

Go back to the first one. Change the third line

imageArray[0] = new Image();
imageArray[0].src = "my-image-01.png";
imageArray[0].imageCaption = "A caption for the image";

Two issues:

• there's a . instead of a , at image02 in imageArray[1]
• you cannot use a . as attribute name of an object

So the code should look something like this:

imageArray[0]= {
    image: new Image(),
    src: "my-image-01.png",  //"SyntaxError: missing : after property id"
    caption: "An image caption"
};

imageArray[1] = {
    image: new Image().
    src: "my-image-02.png",
    caption: "Another image caption"
}

First: System.Array class is abstract, you can't istanziate it. [You can use ArrayList from collections]

Second: to assign a value within object initializzation you must use "=" and not ":" followed by "," like this: new Image { src = "my-image-01.png", imageCaption = "An image caption" }

your code:

var imageList = new ArrayList();

        imageList.Add(new Image { src = "my-image-01.png", imageCaption = "An image caption" });
        imageList.Add(new Image { src = "my-image-02.png", imageCaption = "Another image caption" });