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

Question

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

Can you alter the data structure? It would be a little simpler if you stored image attributes using the ID as a key, instead of storing them in an Array. FYI, $("img .holder") should have the space removed. $("img.holder") And this.attr(...) will fail. — user1106925
– user1106925, Commented Jun 6, 2012 at 20:11
You add images with a unique id to an array? How are you getting the same id mutiple times in data? — Challe
– Challe, Commented Jun 6, 2012 at 20:11
@Charles: I assume it's from subsequent calls of pickimage(). Not sure though. — user1106925
– user1106925, Commented Jun 6, 2012 at 20:11

topek · Accepted Answer · 2012-06-06 20:19:05Z

1

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);

answered Jun 6, 2012 at 20:19

topek

19k3 gold badges38 silver badges43 bronze badges

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

Comments

Panos Bariamis · Accepted Answer · 2012-06-06 20:26:51Z

1

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/

answered Jun 6, 2012 at 20:26

Panos Bariamis

4,6697 gold badges41 silver badges63 bronze badges

Comments

Pablo Mescher · Accepted Answer · 2012-06-06 20:35:45Z

1

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))

answered Jun 6, 2012 at 20:35

Pablo Mescher

27.6k6 gold badges32 silver badges33 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related