CODEWITHSUNDEEP
javascriptjqueryarrays
Solomon Sam
Solomon Sam

Reputation: 268

How to get values of an image into an object/array

im trying to create a function where it loops through a set of images and gets the values of it and adds them to an object/array.

<div id="col1">
    <img id="layer_a" src="imga.jpg" height="320" width="400" class="holder">
    <img id="layer_b" src="imgb.jpg" height="320" width="400" class="holder">
    <img id="layer_c" src="imgc.jpg" height="320" width="400" class="holder">
    <img id="layer_d" src="imgd.jpg" height="320" width="400" class="last">
</div>
<div id="col2">
    <img id="layer_e" src="imge.jpg" height="320" width="400" class="holder">
    <img id="layer_f" src="imgf.jpg" height="320" width="400" class="last">
</div>

the script:

var data = {};

function pickimage() {
$("img .holder").each(function() {
    var idset = this.attr('id');
    var srcset = this.attr('src');
    var heightset = this.attr('height');
    var widthset = this.attr('width');
    var newSet = {
        'id': idset,
        'src': srcset,
        'width': widthset,
        'height': heightset
    };
    data.images.push(newSet);
    for (var i = 0; i < data.images.length; ++i) {
        if (data.images[i].id == id) return i;
    }
});

}

pickimage();

i want the data to look like this:

var data = {
 "images": [{
    "id": "layer_a",
    "src": "imga.jpg",
    "width": "400",
    "height": "320"}]
};

and so on without getting the same id's twice

Upvotes: 0

Views: 362

Answers (3)

Pablo Mescher
Pablo Mescher

Reputation: 27437

fiddle

While I was working on the fiddle, you got several similar answers. Check the one that fits best for you

JS

var data = {
    'images': Array()
}

function pickimage() {
$("#imagecontainer").find('img').each(function() {
    var img= $(this)
    var idset = img.attr('id');
    var srcset = img.attr('src');
    var heightset = img.attr('height');
    var widthset = img.attr('width');
    var newSet = {
      'id': idset,
      'src': srcset,
      'width': widthset,
      'height': heightset
    };
    data.images.push(newSet);

});

}

pickimage();
alert(JSON.stringify(data))

Upvotes: 1

Panos Bariamis
Panos Bariamis

Reputation: 4653

you have to modify your JS as

var data = {
    images: []
};

function pickimage() {
    $("img.holder").each(function() {
        var _self = $(this);
        data.images.push({
            'id': _self.attr('id'),
            'src': _self.attr('src'),
            'width': _self.attr('width'),
            'height': _self.attr('height')
        });
    });
}

pickimage();

for (var i = 0, len=data.images.length; i < len; i++) {
    console.log(data.images[i]);
}

see http://jsfiddle.net/LDFrp/

Upvotes: 1

topek
topek

Reputation: 18979

I think @am not i am is right that there are subsequent calls. If you need to have thoose calls, I have a simple (jsFiddle)[http://jsfiddle.net/CypAA/] that takes care of that.

var data = [];
var ids = {};

function pickImage() {
    $('img.holder').each(function() {
        if (ids[this.id]) return;
        ids[this.id] = 1;

        data.push({
            id: this.id,
            src: this.src,
            width: this.width,
            height: this.height
        });
    });
}

pickImage();
pickImage();
pickImage();

console.log(data);​

Upvotes: 1

Related Questions