Need help regarding building logic, adding properties to object

I have an images array in which there are number of images. Not fixed, may be one or two or 8. When i have fixed number of images then i was using the code something like this

var details = {

    image1: {
        position: 0,
        title: $slideDiv.children().eq(0).attr("alt")
    },
    image2: {
        position: -400,
        title: $slideDiv.children().eq(1).attr("alt")
    },
    image3: {
        position: -800,
        title: $slideDiv.children().eq(2).attr("alt")
    },
    image4: {
        position: -1200,
        title: $slideDiv.children().eq(3).attr("alt")
    },
    image5: {
        position: -1600,
        title: $slideDiv.children().eq(4).attr("alt")
    }

}; //end of var details

But now i have images in array. I want that details object has added images in it equal to number of images in the array. I tried something like this

var details = {};
var position = 0;
images.each(function(index){
    details.("image" + index) : {
        position: position,
        title: $slideDiv.children().eq(index).attr("alt")
    }

    position += -400;

}) ; //end of .each()

The logic that i am trying to make is if i have two images in the images array the it should become something like this

var details = {
    image1: {
        position: 0,
        title: $slideDiv.children().eq(1).attr("alt")
    },
    image2: {
        position: -400,
        title: $slideDiv.children().eq(2).attr("alt")
    }

}

but this is not working. Of course my syntax is wrong

details.("image" + index) : {..}

How can i do this?

Thanks

2012-04-04 04:55
by Basit

Why not just make it an array rather than an object with named properties - Paul Phillips 2012-04-04 05:21

I am building image gallery. when the number of images are fixed then the logic was with the objects. So now i am just trying to make things dynamic rather than static. So i am using the same logic but now all the variables are setting with respect to the number of images in the arra - Basit 2012-04-04 05:28

For clarity purposes, you might want to switch to an array. Usually you would do the obj[name] syntax only in cases where you couldn't predict the name in advance. Here the names follow such a regular pattern they don't actually tell you anything about specific elements, and just complicate the storage and retrieval of individual elements - Paul Phillips 2012-04-04 05:40

The correct syntax is: details['image' + index] which can later be accessed through details.image0, details.image1 etc.

So it should be: details['image' + index] = {prop: val}

2012-04-04 05:04
by powerbuoy

Woops, too late - powerbuoy 2012-04-04 05:04

it is not working also

details['image' + index] : {
            position: position,
            title: $slideDiv.children().eq(index).attr("alt")
        }

The error is *missing ; before statement * on line details['image' + index] : {Basit 2012-04-04 05:07

It needs to be: details['image' + index] = {prop: val}powerbuoy 2012-04-04 05:09

I just tried another thing, i want to confirm is that syntax also true?

images.each(function(index){
        details["image" + (index + 1)] = new Object;
        details["image" + (index + 1)].position = position;
        details["image" + (index + 1)].title = $slideDiv.children().eq(index).attr("alt")
 position += -400;
    }) ; //end of .each()

Thank - Basit 2012-04-04 05:20

Looks fine except you forgot a ; before position += 400. Don't really see why you'd do that instead of details['image' + (index + 1)] = {prop: val, prop2: val}; though - powerbuoy 2012-04-04 05:44

I tried this just before you tell me the answer and it worked for me :). Anyways thanks for your answer, i tried your answer too and it worked too :). Now i have done what i want. My image gallery is working perfectly :) thank - Basit 2012-04-04 07:25

In Javascript you can access a property one of two ways:

obj.property

is equivalent to

obj["property"]

So in your case you'll want to write it like this:

details["image"+index]

2012-04-04 04:59
by McGarnagle