How do I use jquery to create an array of my images?

Question

How can I use jquery to loop though my images & create an array using the "title" & "src" values?

This is my list of images:

<div id="myImages">
  <img data-title="1" src="1.jpg" alt="">
  <img data-title="2" src="2.jpg" alt="">
  <img data-title="3" src="3.jpg" alt="">
  <img data-title="4" src="4.jpg" alt="">
</div>

This is what I need my array to be:

[ { "title" : "1", "image" : "1.jpg", }, { "title" : "2", "image" : "2.jpg", }, { "title" : "3", "image" : "3.jpg", }, { "title" : "4", "image" : "4.jpg", } ]

Just fyi, an array of arrays looks like this: [[1,2,3],[2,3,4],[2,34,55]], not [{1,2,3},{2,3,4},{2,34,55}]. — Avisari
– Avisari, Commented Feb 11, 2014 at 8:50

Arun P Johny · Accepted Answer · 2014-02-11 08:47:40Z

4

Use .map() convert a set of dom elements to a different representation

var array = $('#myImages img').map(function () {
    var $this = $(this);
    return {
        title: $this.data('title'),
        image: $this.attr('src')
    }
}).get();

Demo: Fiddle

answered Feb 11, 2014 at 8:47

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Comments

BaBL86 · Accepted Answer · 2014-02-11 08:48:31Z

1

Try this:

var data = [];

$('#myImages img').each(function() {
    var img = {title: $(this).data('title'), image: $(this).attr('src')};
    data[data.length] = img;
});

answered Feb 11, 2014 at 8:48

BaBL86

2,6301 gold badge16 silver badges13 bronze badges

Comments

Arnelle Balane · Accepted Answer · 2014-02-11 08:49:09Z

1

var imageArray = [];
$('#myImages img').each(function() {
  imageArray.push({title: $(this).data('title'), image: $(this).attr('src')});
});

answered Feb 11, 2014 at 8:49

Arnelle Balane

5,4951 gold badge28 silver badges32 bronze badges

Collectives™ on Stack Overflow

How do I use jquery to create an array of my images?

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