CODEWITHSUNDEEP
javascriptjqueryarrays
Carlos Hidalgo
Carlos Hidalgo

Reputation: 3

Convert list of elements into array

I’m trying to use a gallery plugin that loads images from an array (script). I want to generate this array from a list of elements inside a container, such as:

<div id="gallery2">
  <img src="image01.jpg" title="Title Image 1"> 
  <img src="image02.jpg" title="Title Image 2"> 
  <img src="image03.jpg" title="Title Image 3"> 
  <img src="image04.jpg" title="Title Image 4"> 
  <img src="image05.jpg" title="Title Image 5"> 
  <img src="image06.jpg" title="Title Image 6"> 
</div>

to this:

arr = [
  {src: 'image01.jpg', caption: 'Title Image 1'},
  {src: 'image02.jpg', caption: 'Title Image 2'},
  {src: 'image03.jpg', caption: 'Title Image 3'},
  {src: 'image04.jpg', caption: 'Title Image 4'},
  {src: 'image05.jpg', caption: 'Title Image 5'},
  {src: 'image06.jpg', caption: 'Title Image 6'}
]

I’ve been trying some examples that I found over here, but with no luck. I think my resulting array is not a proper "javascript array", so it does not work. I’m using this code: 

var arr = [];
$('#gallery2 img').each(function (index, element) {
  arr[arr.length] = "{ src:'" + $(this).attr('src') + "'";
  arr[arr.length] = "caption: '" + $(this).attr('title') + "'}";
});
arr = (arr.join(','));

Which results in:

{ src:'image01.jpg',caption: 'Title Image 1'},
{ src:'image02.jpg',caption: 'Title Image 2'}, 
{ src:'image03.jpg',caption: 'Title Image 3'}, 
{ src:'image04.jpg',caption: 'Title Image 4'}, 
{ src:'image05.jpg',caption: 'Title Image 5'}, 
{ src:'image06.jpg',caption: 'Title Image 6'}

so far it seams the array have the format i need, but, for some reason the function that loads this array of images is not working properly. The result is this:

<img src="{ src:'image01.jpg',caption: 'Title Image 1'},{ src:'image02.jpg',caption: 'Title Image 2'},{ src:'image03.jpg',caption: 'Title Image 3'}" alt="" title="">  ...and so on.

Any suggestions?

Many thanks!

Upvotes: 0

Views: 62

Answers (3)

gpasci
gpasci

Reputation: 1440

var arr = [];
$('#gallery2 img').each(function (index, element) {
    var el = {};
    el.src = $(this).attr('src');
    el.title = $(this).attr('title');
    arr.push(el);
});

Your implementation is trying to replicate the representation of the javascript object you want, so it result in a string. This way you build a real array of javascript objects.

Upvotes: 0

Z-Bone
Z-Bone

Reputation: 1584

try this:

var arr = [];
$('#gallery2 img').each(function (index, element) {
  var tempObject = {};
  tempObject.src = $(this).attr('src');
  tempObject.caption = $(this).attr('title');
  arr.push(tempObject);
});

Upvotes: 3

Nenad Vracar
Nenad Vracar

Reputation: 122037

You can use map() and get() to return array.

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

console.log(data)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery2">
  <img src="image01.jpg" title="Title Image 1">
  <img src="image02.jpg" title="Title Image 2">
  <img src="image03.jpg" title="Title Image 3">
  <img src="image04.jpg" title="Title Image 4">
  <img src="image05.jpg" title="Title Image 5">
  <img src="image06.jpg" title="Title Image 6">
</div>

Upvotes: 3

Related Questions